forked from opentiny/tiny-vue
507 lines
39 KiB
JavaScript
507 lines
39 KiB
JavaScript
export const mapVar = {
|
||
/* 1.1品牌色 */
|
||
|
||
/* 品牌主色 */
|
||
'--tv-base-color-brand': '#191919', // 主色黑/链接颜色
|
||
|
||
'--tv-base-color-brand-1': '#f0f7ff',
|
||
'--tv-base-color-brand-2': '#deecff', // 日期选择悬浮背景色 /提示-背景色
|
||
'--tv-base-color-brand-3': '#b3d6ff', // 浅背景-悬浮色,开关组件“开”禁用背景色
|
||
'--tv-base-color-brand-4': '#7eb7fc',
|
||
'--tv-base-color-brand-5': '#4191fa',
|
||
'--tv-base-color-brand-6': '#1476ff', // 辅助色, 文字按钮色、文字按钮悬浮色 /单选框选中悬浮/聚焦/激活小圆点填充色和边框色
|
||
'--tv-base-color-brand-7': '#0f5ed4',
|
||
'--tv-base-color-brand-8': '#0845a6',
|
||
'--tv-base-color-brand-9': '#022e7a',
|
||
'--tv-base-color-brand-10': '#001a4a',
|
||
'--tv-base-color-brand-11': '#3d6899',
|
||
'--tv-base-color-brand-12': '#7fa6d4',
|
||
'--tv-base-color-brand-13': '#b6d4f2',
|
||
|
||
/* 1.2 中立色 */
|
||
|
||
/* 公用灰色系,用于文本、图标、线条、背景色 */
|
||
'--tv-base-color-common-1': '#ffffff', // 顶部导航背景色、 顶部导航下拉背景色/次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
|
||
'--tv-base-color-common-2': '#fafafa', // 新区域组件-悬浮背景色
|
||
'--tv-base-color-common-3': '#f5f5f5', // 通用背景-页面背景色/ 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
|
||
'--tv-base-color-common-4': '#f0f0f0', // 白色背景分割线 /禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
|
||
'--tv-base-color-common-5': '#e6e6e6', // 灰色标签背景色/轮播箭头悬浮色
|
||
'--tv-base-color-common-6': '#dbdbdb', // 开关组件“关”禁用背景色/ 禁用描边/ 灰色背景分割线
|
||
'--tv-base-color-common-7': '#c2c2c2', // 选块悬浮色/页签禁用文字色/边框色(如下拉、输入框)/文字禁用/禁用图标
|
||
'--tv-base-color-common-8': '#808080', // 弱化信息、说明文字
|
||
'--tv-base-color-common-9': '#595959', // 次要信息/图标默认/主色悬浮色、链接悬浮色/主要按钮-hover/Focus背景色
|
||
'--tv-base-color-common-10': '#333333',
|
||
'--tv-base-color-common-11': '#191919', // 正文主色,重要信息、标题颜色、输入类文本颜色、导航栏文字图标/主要按钮-背景色
|
||
'--tv-base-color-common-12': '#000000',
|
||
|
||
/* 1.4 功能色 */
|
||
'--tv-base-color-success-1': '#edf7df',
|
||
'--tv-base-color-success-2': '#daf2bb',
|
||
'--tv-base-color-success-3': '#b9e683', // 成功-按钮active、hover 颜色
|
||
'--tv-base-color-success-4': '#9edb58',
|
||
'--tv-base-color-success-5': '#7dcc29',
|
||
'--tv-base-color-success-6': '#5cb300', // 成功-背景色/ 图标色/文本色 /进度条当前进度背景色
|
||
'--tv-base-color-success-7': '#4b9902',
|
||
'--tv-base-color-success-8': '#3c8001',
|
||
'--tv-base-color-success-9': '#2e6600',
|
||
'--tv-base-color-success-10': '#1f4700',
|
||
'--tv-base-color-success-11': '#628c38',
|
||
'--tv-base-color-success-12': '#a2c777',
|
||
'--tv-base-color-success-13': '#d2e6b8',
|
||
'--tv-base-color-success-14': '#e6f2d5', // 成功-背景色/边框色 (这个不在规范色阶中)
|
||
|
||
'--tv-base-color-error-1': '#fff1f0', //
|
||
'--tv-base-color-error-2': '#fce2e0', // 错误-边框色 /背景色 /错误校验背景色,设计稿用了这个#FCE3E1,但不在色阶中
|
||
'--tv-base-color-error-3': '#faa7a3', // 错误-图标色、校验边框色/、悬浮菜单背景色
|
||
'--tv-base-color-error-4': '#fa8682', //
|
||
'--tv-base-color-error-5': '#f76360',
|
||
'--tv-base-color-error-6': '#f23030', // 错误-文本色/交易金额色 / 紧急告警色
|
||
'--tv-base-color-error-7': '#bf0a1c',
|
||
'--tv-base-color-error-8': '#a3171c',
|
||
'--tv-base-color-error-9': '#78080e',
|
||
'--tv-base-color-error-10': '#4d0005',
|
||
'--tv-base-color-error-11': '#a64242',
|
||
'--tv-base-color-error-12': '#f2c5c2',
|
||
'--tv-base-color-error-13': '#fce3e1', // 错误-背景色/错误校验背景色 (这个不在规范色阶中)
|
||
|
||
'--tv-base-color-warn-1': '#fff4e8',
|
||
'--tv-base-color-warn-2': '#ffebd1', // 告警-背景色/边框色(浅)
|
||
'--tv-base-color-warn-3': '#fcd5a4',
|
||
'--tv-base-color-warn-4': '#fcbc72',
|
||
'--tv-base-color-warn-5': '#ff9a2e',
|
||
'--tv-base-color-warn-6': '#ff8800', // 告警-图标色/深色背景 /重要告警色
|
||
'--tv-base-color-warn-7': '#d96900', // 优惠折扣功能色 ti-color-discount
|
||
'--tv-base-color-warn-8': '#a64d00',
|
||
'--tv-base-color-warn-9': '#733400',
|
||
'--tv-base-color-warn-10': '#4d2201',
|
||
'--tv-base-color-warn-11': '#9e6d3f',
|
||
'--tv-base-color-warn-12': '#d6a981',
|
||
'--tv-base-color-warn-13': '#f2d8c2',
|
||
'--tv-base-color-warn-secondary-1': '#ffb700', // 次要告警色 黄色系
|
||
|
||
'--tv-base-color-info-1': '#f0f7ff',
|
||
'--tv-base-color-info-2': '#deecff', // 提示-背景色 / 边框色
|
||
'--tv-base-color-info-3': '#b3d6ff', // 开关组件“开”禁用背景色
|
||
'--tv-base-color-info-4': '#7eb7fc',
|
||
'--tv-base-color-info-5': '#4191fa',
|
||
'--tv-base-color-info-6': '#1476ff', // 提示-图标色 / 文本色
|
||
'--tv-base-color-info-7': '#0f5ed4',
|
||
'--tv-base-color-info-8': '#0845a6',
|
||
'--tv-base-color-info-9': '#022e7a',
|
||
'--tv-base-color-info-10': '#001a4a',
|
||
'--tv-base-color-info-11': '#3d6899',
|
||
'--tv-base-color-info-12': '#7fa6d4',
|
||
'--tv-base-color-info-13': '#b6d4f2',
|
||
|
||
/** 2. 公共色 **/
|
||
|
||
/** 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-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-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-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-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-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-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-bg': 'var(--tv-base-color-info-6)', // #1476ff 信息-背景色(深) alert/tag的light类型
|
||
'--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-icon': 'var(--tv-base-color-info-6)', // #1476ff 信息-图标色
|
||
|
||
/** 2.3 交互类型颜色---- Button组件、Link 文字链接 **/
|
||
|
||
/* 主要-primary */
|
||
'--tv-color-act-primary-text': 'var(--tv-base-color-brand)', // #191919 主要文本色-1(品牌色): 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-primary-text-hover': 'var(--tv-base-color-brand)', // #191919 主要hover文本色-1 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-primary-text-active': 'var(--tv-base-color-brand)', // #191919 主要active文本色-1 朴素/幽灵/纯文本/链接
|
||
|
||
'--tv-color-act-primary-text-inverse-tint': 'var(--tv-base-color-common-1)', // #fff 主要文本色-2(白色) 基本按钮
|
||
'--tv-color-act-primary-text-inverse-tint-hover': 'var(--tv-base-color-common-1)', // #fff 主要hover文本色-2(白色) 基本按钮
|
||
'--tv-color-act-primary-text-inverse-tint-active': 'var(--tv-base-color-common-1)', // #fff 主要active文本色-2(白色) 基本按钮
|
||
|
||
'--tv-color-act-primary-plain-text-hover': 'var(--tv-base-color-brand)', // #191919 朴素悬浮文本色
|
||
|
||
'--tv-color-act-primary-bg': 'var(--tv-base-color-brand)', // #191919 主要背景色-1(品牌色)": "基本按钮
|
||
'--tv-color-act-primary-bg-hover': 'var(--tv-base-color-common-9)', // #595959 主要hover背景色-1 基本按钮
|
||
'--tv-color-act-primary-bg-active': 'var(--tv-base-color-common-9)', // #595959 主要active背景色-1 基本按钮
|
||
|
||
'--tv-color-act-primary-bg-white': 'var(--tv-base-color-common-1)', // #fff 主要背景色-2(白):朴素
|
||
'--tv-color-act-primary-bg-white-hover': 'var(--tv-base-color-common-1)', // #fff 主要hover背景色-2(白色): 朴素
|
||
'--tv-color-act-primary-bg-white-active': 'var(--tv-base-color-common-1)', // 主要active背景色-2(白色): 朴素
|
||
|
||
'--tv-color-act-primary-border': 'var(--tv-base-color-brand)', // #191919 主要边框色-1 基本按钮
|
||
'--tv-color-act-primary-border-hover': 'var(--tv-base-color-common-9)', // #595959 主要hover边框色-1 基本按钮
|
||
'--tv-color-act-primary-border-active': 'var(--tv-base-color-common-9)', // #595959 主要active边框色-1 基本按钮
|
||
|
||
'--tv-color-act-primary-border-light': 'var(--tv-base-color-common-9)', // #595959 边框色-2 幽灵/朴素
|
||
'--tv-color-act-primary-border-light-hover': 'var(--tv-base-color-common-1)', // #fff 边框色-2.1 朴素hover
|
||
'--tv-color-act-primary-border-light-active': 'var(--tv-base-color-common-1)', // #fff 边框色-2.1 朴素active
|
||
'--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(成功主色): 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-success-text-hover': 'var(--tv-base-color-success-6)', // #5cb300 成功hover文本色-1 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-success-text-active': 'var(--tv-base-color-success-6)', // #5cb300 成功active文本色-1 朴素/幽灵/纯文本/链接
|
||
|
||
'--tv-color-act-success-text-white': 'var(--tv-base-color-common-1)', // #fff 成功文本色-2(白色):基本按钮
|
||
'--tv-color-act-success-text-white-hover': 'var(--tv-base-color-common-1)', // #fff 成功hover文本色-2(白色) 基本按钮
|
||
'--tv-color-act-success-text-white-active': 'var(--tv-base-color-common-1)', // #fff 成功active文本色-2(白色) 基本按钮
|
||
|
||
'--tv-color-act-success-plain-text-hover': 'var(--tv-base-color-success-6)', // #5cb300 朴素悬浮文本色
|
||
|
||
'--tv-color-act-success-bg': 'var(--tv-base-color-success-6)', // #5cb300 成功背景色-1(品牌色):基本按钮
|
||
'--tv-color-act-success-bg-hover': 'var(--tv-base-color-success-5)', // #7dcc29 成功hover背景色-1 基本按钮
|
||
'--tv-color-act-success-bg-active': 'var(--tv-base-color-success-5)', // #7dcc29 成功active背景色-1 基本按钮
|
||
|
||
'--tv-color-act-success-bg-light': 'var(--tv-base-color-success-1)', // #edf7df 成功背景色-1(品牌色):朴素
|
||
'--tv-color-act-success-bg-light-hover': 'var(--tv-base-color-success-1)', // #edf7df 成功hover背景色-1 朴素
|
||
'--tv-color-act-success-bg-light-active': 'var(--tv-base-color-success-1)', // #edf7df 成功active背景色-1 朴素
|
||
|
||
'--tv-color-act-success-border': 'var(--tv-base-color-success-6)', // #5cb300 成功边框色-1:基本按钮/幽灵按钮
|
||
'--tv-color-act-success-border-hover': 'var(--tv-base-color-success-5)', // #7dcc29 成功hover边框色-1.1 基本按钮
|
||
'--tv-color-act-success-border-active': 'var(--tv-base-color-success-5)', // #7dcc29 成功active边框色-1.1 基本按钮
|
||
'--tv-color-act-success-border-hover-1': 'var(--tv-base-color-success-2)', // #daf2bb 成功hover边框色-1.2 幽灵按钮
|
||
'--tv-color-act-success-border-active-1': 'var(--tv-base-color-success-2)', // #daf2bb 成功active边框色-1.2 幽灵按钮
|
||
|
||
'--tv-color-act-success-border-light': 'var(--tv-base-color-success-2)', // #daf2bb 成功边框色-2": "朴素按钮
|
||
'--tv-color-act-success-border-light-hover': 'var(--tv-base-color-success-1)', // #edf7df 成功hover边框色 朴素按钮
|
||
'--tv-color-act-success-border-light-active': 'var(--tv-base-color-success-1)', // #edf7df 成功active边框色 朴素按钮
|
||
|
||
/* 告警-warning */
|
||
'--tv-color-act-warning-text': 'var(--tv-base-color-warn-6)', // #ff8800 告警文本色-1(告警主色):朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-warning-text-hover': 'var(--tv-base-color-warn-6)', // #ff8800 告警hover文本色-1 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-warning-text-active': 'var(--tv-base-color-warn-6)', // #ff8800 告警active文本色-1 朴素/幽灵/纯文本/链接
|
||
|
||
'--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(告警主色):基本按钮
|
||
'--tv-color-act-warning-bg-hover': 'var(--tv-base-color-warn-5)', // #ff9a2e 告警hover背景色-1 基本按钮
|
||
'--tv-color-act-warning-bg-active': 'var(--tv-base-color-warn-5)', // #ff9a2e 告警active背景色-1 基本按钮
|
||
|
||
'--tv-color-act-warning-bg-light': 'var(--tv-base-color-warn-1)', // #fff4e8 告警背景色-1(告警主色衍生色):朴素按钮
|
||
'--tv-color-act-warning-bg-light-hover': 'var(--tv-base-color-warn-1)', // #fff4e8 告警hover背景色-1 朴素按钮
|
||
'--tv-color-act-warning-bg-light-active': 'var(--tv-base-color-warn-1)', // #fff4e8 告警active背景色-1 朴素按钮
|
||
|
||
'--tv-color-act-warning-border': 'var(--tv-base-color-warn-6)', // #ff8800 告警边框色-1:基本按钮/幽灵按钮
|
||
'--tv-color-act-warning-border-hover': 'var(--tv-base-color-warn-5)', // #ff9a2e 告警hover边框色-1.1 基本按钮
|
||
'--tv-color-act-warning-border-active': 'var(--tv-base-color-warn-5)', // #ff9a2e 告警active边框色-1.1 基本按钮
|
||
'--tv-color-act-warning-border-hover-1': 'var(--tv-base-color-warn-2)', // #ffebd1 告警幽灵hover边框色-1.2 幽灵按钮
|
||
'--tv-color-act-warning-border-active-1': 'var(--tv-base-color-warn-2)', // #ffebd1 告警幽灵active边框色-1.2 幽灵按钮
|
||
|
||
'--tv-color-act-warning-border-light': 'var(--tv-base-color-warn-2)', // #ffebd1 告警边框色-2:朴素按钮
|
||
'--tv-color-act-warning-border-light-hover': 'var(--tv-base-color-warn-1)', // #fff4e8 告警hover边框色 朴素按钮
|
||
'--tv-color-act-warning-border-light-active': 'var(--tv-base-color-warn-1)', // #fff4e8 告警active边框色 朴素按钮
|
||
|
||
/* 危险-danger */
|
||
'--tv-color-act-danger-text': 'var(--tv-base-color-error-6)', // #f23030 危险文本色-1(成功主色):朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-danger-text-hover': 'var(--tv-base-color-error-6)', // #f23030 #f23030 危险hover文本色-1 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-danger-text-active': 'var(--tv-base-color-error-6)', // #f23030 #f23030 危险active文本色-1 朴素/幽灵/纯文本/链接
|
||
|
||
'--tv-color-act-danger-text-white': 'var(--tv-base-color-common-1)', // #fff 危险文本色-2(白色):基本按钮
|
||
'--tv-color-act-danger-text-white-hover': 'var(--tv-base-color-common-1)', // #fff 危险hover文本色-2(白色) 基本按钮
|
||
'--tv-color-act-danger-text-white-active': 'var(--tv-base-color-common-1)', // #fff 危险active文本色-2(白色) 基本按钮
|
||
|
||
'--tv-color-act-danger-plain-text-hover': 'var(--tv-base-color-error-6)', // #f23030 朴素按钮
|
||
|
||
'--tv-color-act-danger-bg': 'var(--tv-base-color-error-6)', // #f23030 #f23030 危险背景色-1(成功主色):基本按钮
|
||
'--tv-color-act-danger-bg-hover': 'var(--tv-base-color-error-5)', // #f76360 危险hover背景色-1 基本按钮
|
||
'--tv-color-act-danger-bg-active': 'var(--tv-base-color-error-5)', // #f76360 危险active背景色-1 基本按钮
|
||
|
||
'--tv-color-act-danger-bg-light': 'var(--tv-base-color-error-1)', // #fff1f0 危险背景色-2(成功主色衍生色):朴素按钮
|
||
'--tv-color-act-danger-bg-light-hover': 'var(--tv-base-color-error-1)', // #fff1f0 危险hover背景色-1 朴素按钮
|
||
'--tv-color-act-danger-bg-light-active': 'var(--tv-base-color-error-1)', // #fff1f0 危险active背景色-1 朴素按钮
|
||
|
||
'--tv-color-act-danger-border': 'var(--tv-base-color-error-6)', // #f23030 #f23030 危险边框色-1:基本按钮/幽灵按钮
|
||
'--tv-color-act-danger-border-hover': 'var(--tv-base-color-error-5)', // #f76360 危险hover边框色-1.1 基本按钮
|
||
'--tv-color-act-danger-border-active': 'var(--tv-base-color-error-5)', // #f76360 危险active边框色-1.1 基本按钮
|
||
'--tv-color-act-danger-border-hover-1': 'var(--tv-base-color-error-2)', // #fce2e0 危险hover边框色-1.2 幽灵按钮
|
||
'--tv-color-act-danger-border-active-1': 'var(--tv-base-color-error-2)', // #fce2e0 危险active边框色-1.2 幽灵按钮
|
||
|
||
'--tv-color-act-danger-border-light': 'var(--tv-base-color-error-2)', // #fce2e0 危险边框色-2": "朴素按钮
|
||
'--tv-color-act-danger-border-light-hover': 'var(--tv-base-color-error-1)', // #fff1f0 危险hover边框色 朴素按钮
|
||
'--tv-color-act-danger-border-light-active': 'var(--tv-base-color-error-1)', // #fff1f0 危险active边框色 朴素按钮
|
||
|
||
/* 信息-info */
|
||
'--tv-color-act-info-text': 'var(--tv-base-color-info-6)', // #1476ff 信息文本色-1(信息主色):朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-info-text-hover': 'var(--tv-base-color-info-6)', // #1476ff 信息hover文本色-1 朴素/幽灵/纯文本/链接
|
||
'--tv-color-act-info-text-active': 'var(--tv-base-color-info-6)', // #1476ff 信息active文本色-1 朴素/幽灵/纯文本/链接
|
||
|
||
'--tv-color-act-info-text-white': 'var(--tv-base-color-common-1)', // #fff 信息文本色-2(白色):基本按钮
|
||
'--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-6)', // #1476ff 朴素按钮
|
||
|
||
'--tv-color-act-info-bg': 'var(--tv-base-color-info-6)', // #1476ff 信息背景色-1(信息主色):基本按钮
|
||
'--tv-color-act-info-bg-hover': 'var(--tv-base-color-info-5)', // #4191fa 信息hover背景色-1 基本按钮
|
||
'--tv-color-act-info-bg-active': 'var(--tv-base-color-info-5)', // #4191fa 信息active背景色-1 基本按钮
|
||
|
||
'--tv-color-act-info-bg-light': 'var(--tv-base-color-info-1)', // #f0f7ff 信息背景色-1(信息主色衍生色):朴素按钮
|
||
'--tv-color-act-info-bg-light-hover': 'var(--tv-base-color-info-1)', // #f0f7ff 信息hover背景色-1 朴素按钮
|
||
'--tv-color-act-info-bg-light-active': 'var(--tv-base-color-info-1)', // #f0f7ff 信息active背景色-1 朴素按钮
|
||
|
||
'--tv-color-act-info-border': 'var(--tv-base-color-info-6)', // #1476ff 信息边框色-1:基本按钮/幽灵按钮
|
||
'--tv-color-act-info-border-hover': 'var(--tv-base-color-info-5)', // #4191fa 信息hover边框色-1.1 基本按钮
|
||
'--tv-color-act-info-border-active': 'var(--tv-base-color-info-5)', // #4191fa 信息active边框色-1.1 基本按钮
|
||
'--tv-color-act-info-border-hover-1': 'var(--tv-base-color-info-2)', // #deecff 信息hover边框色-1.2:幽灵按钮
|
||
'--tv-color-act-info-border-active-1': 'var(--tv-base-color-info-2)', // #deecff 信息active边框色-1.2 幽灵按钮
|
||
|
||
'--tv-color-act-info-border-light': 'var(--tv-base-color-info-2)', // #deecff 信息边框色-2:朴素按钮
|
||
'--tv-color-act-info-border-light-hover': 'var(--tv-base-color-info-1)', // #f0f7ff 信息hover边框色 朴素按钮
|
||
'--tv-color-act-info-border-light-active': 'var(--tv-base-color-info-1)', // #f0f7ff 信息active边框色 朴素按钮
|
||
|
||
/** 2.4 文本色 **/
|
||
'--tv-color-text': 'var(--tv-base-color-common-11)', // #191919 一级文本色-正文主色": "重要信息/标题颜色/输入类文本颜色/导航栏文字图标/顶部导航/一级tab/tip场景文本色
|
||
'--tv-color-text-secondary': 'var(--tv-base-color-common-9)', // #595959 二级文本色-次要信息:卡片式tab页签文本色(深色tab)
|
||
'--tv-color-text-weaken': 'var(--tv-base-color-common-8)', // #808080 三级文本色-弱化信息、说明文字
|
||
'--tv-color-text-placeholder': 'var(--tv-base-color-common-8)', // #808080 占位文本色
|
||
'--tv-color-text-disabled': 'var(--tv-base-color-common-7)', // #c2c2c2 禁用文本色
|
||
'--tv-color-text-active': 'var(--tv-base-color-brand-6)', // #1476ff 选中文本色 / 文本高亮色(搜索关键字高亮)
|
||
'--tv-color-text-important': 'var(--tv-base-color-common-11)', // #191919 重要文本色-文本_金额
|
||
'--tv-color-text-link': 'var(--tv-base-color-brand-6)', // #1476ff 链接色(链接按钮)
|
||
'--tv-color-text-link-hover': 'var(--tv-base-color-brand-6)', // #1476ff 链接悬浮色
|
||
'--tv-color-plain-text-hover': 'var(--tv-base-color-common-11)', // #191919 朴素次要按钮文本悬浮色
|
||
// -- 暗色新增 --
|
||
'--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-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页签激活色
|
||
'--tv-color-text-inverse-active': 'var(--tv-base-color-common-1)', // #fff buttonGrounp激活色
|
||
'--tv-color-text-hover': 'var(--tv-base-color-common-11)', // #191919 片式tab页签悬浮文本色/深色背景卡片式链接悬浮色
|
||
'--tv-color-text-link-1': 'var(--tv-base-color-common-11)', // #191919 面包屑/主要链接
|
||
'--tv-color-text-link-1-hover': 'var(--tv-base-color-common-11)', // #191919 面包屑/主要链接悬浮色
|
||
|
||
/** 2.5 图标色 **/
|
||
'--tv-color-icon': 'var(--tv-base-color-common-8)', // #808080 默认图标色
|
||
'--tv-color-icon-hover': 'var(--tv-base-color-common-11)', // #191919 图标悬浮色
|
||
'--tv-color-icon-active': 'var(--tv-base-color-common-11)', // #191919 图标激活色 级联/下拉多级选中图标色
|
||
'--tv-color-icon-disabled': 'var(--tv-base-color-common-7)', // #c2c2c2 图标禁用色
|
||
'--tv-color-icon-checked-disabled': 'var(--tv-base-color-common-6)', // #dbdbdb 图标禁用色-1 checkbox选中且禁用
|
||
'--tv-color-icon-control': 'var(--tv-base-color-brand)', // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景(稳定态图标色, hover时不用变化)
|
||
'--tv-color-icon-control-active': 'var(--tv-base-color-brand-6)', // #1476ff 控件图标激活色,主要在checkbox、radio图标激活场景
|
||
'--tv-color-icon-control-disabled': 'var(--tv-base-color-common-6)', // #dbdbdb 控件图标禁用色,主要在checkbox、radio图标激活场景
|
||
'--tv-color-icon-link': 'var(--tv-base-color-brand-6)', // #1476ff 链接图标色
|
||
'--tv-color-icon-warn-secondary': 'var(--tv-base-color-warn-secondary-1)', // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
|
||
// -- 暗色新增 --
|
||
'--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 背景色 **/
|
||
|
||
/* 2.6.1 常态 */
|
||
'--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-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-dark': 'var(--tv-base-color-brand)', // #191919", 深色背景色 顶部导航/ 深色tab/深色提示背景色
|
||
|
||
/* 2.6.2 禁用 */
|
||
'--tv-color-bg-disabled': 'var(--tv-base-color-common-4)', // #f0f0f0 禁用背景色
|
||
'--tv-color-bg-disabled-control-checked': 'var(--tv-base-color-common-6)', // #dbdbdb 控件选中状态下的禁用背景色": "选块已选禁用
|
||
'--tv-color-bg-disabled-control-unactive': 'var(--tv-base-color-common-6)', // #dbdbdb 深色背景禁用色": "开关组件“关”禁用背景色
|
||
'--tv-color-bg-disabled-control-active': 'var(--tv-base-color-brand-3)', // #b3d6ff 深色背景禁用色,单、复选框禁用背景色/开关组件“开”禁用背景色
|
||
|
||
/* 2.6.3 悬浮 */
|
||
'--tv-color-bg-hover': 'var(--tv-base-color-common-3)', // #f5f5f5 浅背景-悬浮色 一级tab页签背景-悬浮色 /分页hover背景颜色/表格悬浮/下拉悬浮/左侧导航悬浮
|
||
'--tv-color-bg-hover-primary': 'var(--tv-base-color-common-9)', // #595959 主色背景悬浮:step悬浮
|
||
'--tv-color-bg-hover-secondary': 'var(--tv-base-color-common-1)', // #fff 次要背景色悬浮色": "次要按钮
|
||
'--tv-color-bg-hover-1': 'var(--tv-base-color-brand-2)', // #deecff 选块悬浮态背景色
|
||
'--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/选中 */
|
||
'--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评分选中背景色
|
||
'--tv-color-bg-active-secondary': 'var(--tv-base-color-common-1)', // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
|
||
'--tv-color-bg-active-emphasize': 'var(--tv-base-color-brand-2)', // #deecff 时间选择选中背景色
|
||
'--tv-color-bg-active-emphasize-light': 'var(--tv-base-color-brand-1)', // #f0f7ff 表格选中背景色
|
||
'--tv-color-bg-active-dark': 'var(--tv-base-color-common-3)', // #f5f5f5 深色背景悬浮色
|
||
|
||
// -- 暗色新增 --
|
||
'--tv-color-bg-2': 'var(--tv-base-color-common-1)', // #fff下拉面板/tip背景色
|
||
'--tv-color-bg-3': 'var(--tv-base-color-common-1)', // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/modal,dialogbox背景色/容器二级背景色": "左侧导航/折叠面板/表格下展背景
|
||
'--tv-color-bg-4': 'var(--tv-base-color-common-7)', // #c2c2c2 时间线实心圆点
|
||
'--tv-color-bg-progressbar': 'var(--tv-base-color-success-6)', // #5cb300 step当前进度背景色 (考虑去掉,成功主色替代)
|
||
'--tv-color-bg-active-emphasize-1': 'var(--tv-base-color-common-1)', // #fff 下拉选中背景色、tab二级选中背景色
|
||
'--tv-color-bg-container-hover': 'var(--tv-base-color-common-1)', // #fff 卡片选中悬浮背景色(区块背景)
|
||
'--tv-color-bg-hover-3': 'var(--tv-base-color-brand-2)', // #deecff 日期悬浮
|
||
'--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-inverse-disabled': 'var(--tv-base-color-common-1)', // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用(此3类场景图标白色部分反色成#999)
|
||
|
||
/** 2.7 边框色/分割线颜色 **/
|
||
|
||
/* 2.7.1 边框 */
|
||
'--tv-color-border': 'var(--tv-base-color-common-7)', // #c2c2c2 线条-正常色
|
||
'--tv-color-border-hover': 'var(--tv-base-color-brand)', // #191919 线条悬浮色
|
||
'--tv-color-border-active': 'var(--tv-base-color-brand)', // #191919 线条active色
|
||
'--tv-color-border-active-control': 'var(--tv-base-color-brand-6)', // #1476ff 主色蓝,单选/复选选中的边框色
|
||
'--tv-color-border-disabled': 'var(--tv-base-color-common-6)', // #dbdbdb 线条禁用色
|
||
'--tv-color-border-secondary': 'var(--tv-base-color-common-9)', // #595959 线条-次要色:次要按钮边框默认色
|
||
'--tv-color-border-ghost': 'var(--tv-base-color-common-8)', // #808080
|
||
'--tv-color-border-ghost-active': 'var(--tv-base-color-common-6)', // #dbdbdb
|
||
|
||
/* 2.7.2 分割线 */
|
||
'--tv-color-border-divider': 'var(--tv-base-color-common-4)', // #f0f0f0 分割线1(较长分割线场景)
|
||
'--tv-color-border-divider-short': 'var(--tv-base-color-common-6)', // #dbdbdb 分割线2(较短分割线场景)
|
||
// -- 暗色新增 --
|
||
'--tv-color-border-secondary-hover': 'var(--tv-base-color-common-7)', // #c2c2c2 次要按钮边框悬浮色
|
||
'--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-1': 'var(--tv-base-color-common-6)', // #dbdbdb 滑块圆圈描边
|
||
|
||
/** 3. 字体变量 **/
|
||
|
||
/* 3.1 字体家族 -- 【组件内不要指定】 */
|
||
'--tv-font-family':
|
||
"'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'", // 默认中文
|
||
'--tv-font-family-1': "'Arial', 'San Francisco', 'Helvetica'", // 数字 / 英文
|
||
|
||
/* 3.2 字号 */
|
||
'--tv-font-size-sm': '12px', // 辅助文本
|
||
'--tv-font-size-md': '14px', // 正文,默认字体尺寸
|
||
'--tv-font-size-lg': '16px',
|
||
'--tv-font-size-xl': '18px',
|
||
'--tv-font-size-xxl': '20px',
|
||
'--tv-font-size-default': 'var(--tv-font-size-md)',
|
||
|
||
'--tv-font-size-heading-xs': '16px', // 卡片标题
|
||
'--tv-font-size-heading-sm': '18px', // 页面标题
|
||
'--tv-font-size-heading-md': '20px', // 弹窗标题、数字
|
||
'--tv-font-size-heading-lg': '24px', // 数字、面额
|
||
'--tv-font-size-heading-xl': '32px', // 数字、面额
|
||
|
||
/** 3.3 行高 */
|
||
|
||
'--tv-line-height-number': '1.5',
|
||
|
||
/* 3.4 字重 */
|
||
'--tv-font-weight-thin': '200',
|
||
'--tv-font-weight-regular': '400', // 默认值:nomal
|
||
'--tv-font-weight-bold': '600',
|
||
|
||
/** 4. 圆角变量 **/
|
||
'--tv-border-radius-xs': '2px',
|
||
'--tv-border-radius-sm': '4px',
|
||
'--tv-border-radius-md': '6px', // 默认
|
||
'--tv-border-radius-lg': '8px',
|
||
'--tv-border-radius-round': '999px', // 50% 会造成椭圆,避免使用。
|
||
'--tv-border-radius-brand': 'var(--tv-border-radius-round)', // 品牌相关。用于圆角,按钮、分页等场景
|
||
|
||
/** 5. 边框 **/
|
||
'--tv-border-width': '1px',
|
||
|
||
/** 6. 间距变量 space ----margin、padding、top、 left 、 right、bottom **/
|
||
'--tv-space-base': '4px',
|
||
'--tv-space-xs': '2px',
|
||
'--tv-space-sm': 'var(--tv-space-base)',
|
||
'--tv-space-md': 'calc(var(--tv-space-base) * 2)',
|
||
'--tv-space-lg': 'calc(var(--tv-space-base) * 3)',
|
||
'--tv-space-xl': 'calc(var(--tv-space-base) * 4)',
|
||
'--tv-space-xxl': 'calc(var(--tv-space-base) * 6)', // 内容块之间的间距
|
||
'--tv-space-xxxl': 'calc(var(--tv-space-base) * 8)', // 容器与容器内容的间距
|
||
'--tv-space-table-x': '4px', // 表格单元格水平间距基准
|
||
'--tv-space-table-y': '4px', // 表格单元格垂直间距基准
|
||
|
||
/** 7. 尺寸变量 size **/
|
||
|
||
/** 尺寸系数 calc */
|
||
'--tv-size-base': '4px',
|
||
|
||
/** 7.1 表单类组件的 height */
|
||
'--tv-size-height-xs': '24px', // mini 尺寸
|
||
'--tv-size-height-sm': '28px', // small 尺寸
|
||
'--tv-size-height-md': '32px', // medium 尺寸 - 默认
|
||
'--tv-size-height-lg': '40px', // large 尺寸
|
||
'--tv-size-height-xl': '48px', // xLarge 尺寸
|
||
|
||
/** 7.2 图标大小 width, height **/
|
||
'--tv-icon-size': '16px',
|
||
|
||
/** 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-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)', // 页面卡片、滑块、顶部导航
|
||
'--tv-shadow-1-left': '-1px 0 4px 0 rgba(0, 0, 0, 0.08)',
|
||
'--tv-shadow-1-right': '1px 0 4px 0 rgba(0, 0, 0, 0.08)', // 手风琴(leftmenu)
|
||
|
||
'--tv-shadow-2-up': '0 -2px 12px 0 rgba(0, 0, 0, 0.16)',
|
||
'--tv-shadow-2-down': '0 2px 12px 0 rgba(0, 0, 0, 0.16)', // tips提示、扩展视图
|
||
'--tv-shadow-2-left': '-2px 0 12px 0 rgba(0, 0, 0, 0.16)',
|
||
'--tv-shadow-2-right': '2px 0 12px 0 rgba(0, 0, 0, 0.16)',
|
||
|
||
'--tv-shadow-3-up': '0 -4px 16px 0 rgba(0, 0, 0, 0.08)',
|
||
'--tv-shadow-3-down': '0 4px 16px 0 rgba(0, 0, 0, 0.08)', // 卡片hover/选中、下拉面板
|
||
'--tv-shadow-3-left': '-4px 0 16px 0 rgba(0, 0, 0, 0.08)',
|
||
'--tv-shadow-3-right': '4px 0 16px 0 rgba(0, 0, 0, 0.08)',
|
||
|
||
'--tv-shadow-4-up': '0 -8px 24px 0 rgba(0, 0, 0, 0.16)',
|
||
'--tv-shadow-4-down': '0 8px 24px 0 rgba(0, 0, 0, 0.16)', // 弹窗、气泡确认框
|
||
'--tv-shadow-4-left': '-8px 0 24px 0 rgba(0, 0, 0, 0.16)', // 右侧抽屉
|
||
'--tv-shadow-4-right': '8px 0 24px 0 rgba(0, 0, 0, 0.16)',
|
||
|
||
/** 9. 滚动条变量 **/
|
||
'--tv-size-scrollbar-width': '8px', // 滚动条宽度
|
||
'--tv-size-scrollbar-height': '8px', // 滚动条高度
|
||
'--tv-border-radius-scrollbar-thumb': '4px', // 滑块圆角
|
||
'--tv-color-bg-scrollbar-thumb': 'var(--tv-base-color-common-6)', // #dbdbdb 滑块背景色
|
||
'--tv-color-bg-scrollbar-thumb-hover': 'var(--tv-base-color-common-6)', // #dbdbdb 滑块hover背景色
|
||
'--tv-color-bg-scrollbar-thumb-active': 'var(--tv-base-color-common-6)', // #dbdbdb 滑块active背景色
|
||
'--tv-color-bg-scrollbar-track': 'var(--tv-base-color-common-1)' // #fff 轨道背景色
|
||
}
|