forked from opentiny/tiny-vue
feat: 主题变量增加默认值 (#3162)
This commit is contained in:
chenxi-20
GitHub
parent
9d5e3d351f
commit
381036a52b
|
|
@ -1,13 +1,18 @@
|
|||
import fs from 'node:fs'
|
||||
|
||||
export default () => {
|
||||
let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'})
|
||||
let varsString = fs.readFileSync('../src/base/vars.less', { encoding: 'utf-8' })
|
||||
|
||||
varsString = varsString.replace(':root', 'export const mapVar =')
|
||||
.replaceAll(' --tv', ' "--tv')
|
||||
.replaceAll(': ', ':')
|
||||
.replaceAll(':', '": "')
|
||||
.replaceAll(';', '",')
|
||||
const startIndex = varsString.indexOf('{')
|
||||
|
||||
varsString =
|
||||
'export const mapVar = ' +
|
||||
varsString
|
||||
.slice(startIndex)
|
||||
.replaceAll(' --tv', ' "--tv')
|
||||
.replaceAll(': ', ':')
|
||||
.replaceAll(':', '": "')
|
||||
.replaceAll(';', '",')
|
||||
|
||||
fs.writeFileSync('./mapVar.js', varsString)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,518 +1,506 @@
|
|||
/* prettier-ignore */
|
||||
export const mapVar = {
|
||||
/* 1.1品牌色 */
|
||||
|
||||
/* 品牌主色 */
|
||||
"--tv-base-color-brand": "#191919", // 主色黑/链接颜色
|
||||
'--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",
|
||||
'--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",
|
||||
'--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-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-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-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",
|
||||
'--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-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-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-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 信息-图标色
|
||||
'--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': '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-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-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': '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-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': '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
|
||||
|
||||
|
||||
'--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': '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-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-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': '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边框色 朴素按钮
|
||||
'--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': '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-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-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-plain-text-hover': 'var(--tv-base-color-warn-6)', // #ff8800 朴素悬浮文本色
|
||||
|
||||
"--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-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-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边框色 朴素按钮
|
||||
'--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': '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-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-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': '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边框色 朴素按钮
|
||||
'--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': '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-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-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': '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边框色 朴素按钮
|
||||
'--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': '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 面包屑/主要链接悬浮色
|
||||
'--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': '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 暗色反色成黑色：按钮下拉线头
|
||||
|
||||
'--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/深色提示背景色
|
||||
|
||||
'--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 深色背景禁用色，单、复选框禁用背景色/开关组件“开”禁用背景色
|
||||
'--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 深色背景悬浮色
|
||||
'--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 深色背景悬浮色
|
||||
/* 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）
|
||||
// -- 暗色新增 --
|
||||
'--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
|
||||
'--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-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 滑块圆圈描边
|
||||
'--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'", // 数字 / 英文
|
||||
'--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-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", // 数字、面额
|
||||
'--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",
|
||||
'--tv-line-height-number': '1.5',
|
||||
|
||||
/* 3.4 字重 */
|
||||
"--tv-font-weight-thin": "200",
|
||||
"--tv-font-weight-regular": "400", // 默认值：nomal
|
||||
"--tv-font-weight-bold": "600",
|
||||
'--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)", // 品牌相关。用于圆角，按钮、分页等场景
|
||||
'--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",
|
||||
'--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", // 表格单元格垂直间距基准
|
||||
'--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",
|
||||
'--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 尺寸
|
||||
'--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",
|
||||
'--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-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-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-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-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)",
|
||||
'--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 轨道背景色
|
||||
'--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 轨道背景色
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
// 图标色（默认）
|
||||
--tv-ActionMenu-icon-color: var(--tv-color-icon-link, #1476ff);
|
||||
// 图标色（ card 类型）
|
||||
--tv-ActionMenu-icon-color-card: var(--tv-color-icon-control);
|
||||
--tv-ActionMenu-icon-color-card: var(--tv-color-icon-control, #191919);
|
||||
// 图标禁用色
|
||||
--tv-ActionMenu-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@
|
|||
//-------------------------------------------------------全局场景：------------------------------------------
|
||||
|
||||
// 警告的圆角
|
||||
--tv-Alert-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Alert-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 警告的水平内边距
|
||||
--tv-Alert-padding-x: var(--tv-space-xl);
|
||||
--tv-Alert-padding-x: var(--tv-space-xl, 16px);
|
||||
// 警告的垂直内边距
|
||||
--tv-Alert-padding-y: var(--tv-space-xl);
|
||||
--tv-Alert-padding-y: var(--tv-space-xl, 16px);
|
||||
// 警告的水平外边距
|
||||
--tv-Alert-margin-x: 0; // 规范上外边距不应该设置，但由于历史原因，normal时有固定的上下外边距，保留这个特性。
|
||||
// 警告的垂直外边距
|
||||
|
|
@ -37,75 +37,75 @@
|
|||
// 警告的图标大小
|
||||
--tv-Alert-icon-size: 20px;
|
||||
// 警告的图标右外边距
|
||||
--tv-Alert-icon-margin-right: var(--tv-space-md);
|
||||
--tv-Alert-icon-margin-right: var(--tv-space-md, 8px);
|
||||
|
||||
//-------------------------------------------------------content 场景：title/description/opration------------
|
||||
|
||||
// 警告的标题字号
|
||||
--tv-Alert-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-Alert-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 警告的标题字重
|
||||
--tv-Alert-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Alert-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 警告的标题颜色
|
||||
--tv-Alert-title-text-color: var(--tv-color-text);
|
||||
--tv-Alert-title-text-color: var(--tv-color-text, #191919);
|
||||
// 警告的标题下边距
|
||||
--tv-Alert-title-margin-bottom: var(--tv-space-sm);
|
||||
--tv-Alert-title-margin-bottom: var(--tv-space-sm, 4px);
|
||||
|
||||
// 警告的描述字号
|
||||
--tv-Alert-desc-font-size: var(--tv-font-size-default);
|
||||
--tv-Alert-desc-font-size: var(--tv-font-size-default, 14px);
|
||||
// 警告的描述字重
|
||||
--tv-Alert-desc-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Alert-desc-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 警告的描述颜色
|
||||
--tv-Alert-desc-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Alert-desc-text-color: var(--tv-color-text-secondary, #595959);
|
||||
|
||||
//-------------------------------------------------------close-icon 场景：----------------------------------
|
||||
|
||||
// 警告的关闭按钮的大小
|
||||
--tv-Alert-close-icon-font-size: var(--tv-icon-size);
|
||||
--tv-Alert-close-icon-font-size: var(--tv-icon-size, 16px);
|
||||
// 警告的关闭按钮的颜色
|
||||
--tv-Alert-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Alert-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 警告的关闭按钮的悬浮颜色
|
||||
--tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 警告的关闭按钮距上边的距离
|
||||
--tv-Alert-close-icon-top: var(--tv-space-lg);
|
||||
--tv-Alert-close-icon-top: var(--tv-space-lg, 12px);
|
||||
// 警告的关闭按钮距右边的距离
|
||||
--tv-Alert-close-icon-right: var(--tv-space-lg);
|
||||
--tv-Alert-close-icon-right: var(--tv-space-lg, 12px);
|
||||
|
||||
// 警告的关闭文本的大小
|
||||
--tv-Alert-close-text-font-size: var(--tv-font-size-default);
|
||||
--tv-Alert-close-text-font-size: var(--tv-font-size-default, 14px);
|
||||
|
||||
//-------------------------------------------------------Normal 场景：---------------------------------------
|
||||
|
||||
// 警告的Normal时，图标大小
|
||||
--tv-Alert-icon-size-normal: var(--tv-icon-size);
|
||||
--tv-Alert-icon-size-normal: var(--tv-icon-size, 16px);
|
||||
// 警告的Normal时，水平内边距
|
||||
--tv-Alert-padding-x-normal: var(--tv-space-xl);
|
||||
--tv-Alert-padding-x-normal: var(--tv-space-xl, 16px);
|
||||
// 警告的Normal时，垂直内边距
|
||||
--tv-Alert-padding-y-normal: 9px;
|
||||
// 警告的Normal时,水平外边距
|
||||
--tv-Alert-margin-x-normal: 0;
|
||||
// 警告的Normal时,垂直外边距
|
||||
--tv-Alert-margin-y-normal: var(--tv-space-xl);
|
||||
--tv-Alert-margin-y-normal: var(--tv-space-xl, 16px);
|
||||
|
||||
//-------------------------------------------------------type 场景：------------------------------------------
|
||||
|
||||
// success 主题时警告背景色
|
||||
--tv-Alert-bg-color-success: var(--tv-color-success-bg-light);
|
||||
--tv-Alert-bg-color-success: var(--tv-color-success-bg-light, #e6f2d5);
|
||||
// success 主题时警告图标色
|
||||
--tv-Alert-icon-color-success: var(--tv-color-success-icon);
|
||||
--tv-Alert-icon-color-success: var(--tv-color-success-icon, #5cb300);
|
||||
// error 主题时警告背景色
|
||||
--tv-Alert-bg-color-error: var(--tv-color-error-bg-light);
|
||||
--tv-Alert-bg-color-error: var(--tv-color-error-bg-light, #fce3e1);
|
||||
// error 主题时警告图标色
|
||||
--tv-Alert-icon-color-error: var(--tv-color-error-icon);
|
||||
--tv-Alert-icon-color-error: var(--tv-color-error-icon, #f23030);
|
||||
// warning 主题时警告背景色
|
||||
--tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light);
|
||||
--tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light, #ffebd1);
|
||||
// warning 主题时警告图标色
|
||||
--tv-Alert-icon-color-warning: var(--tv-color-warn-icon);
|
||||
--tv-Alert-icon-color-warning: var(--tv-color-warn-icon, #ff8800);
|
||||
// info 主题时警告背景色
|
||||
--tv-Alert-bg-color-info: var(--tv-color-info-bg-light);
|
||||
--tv-Alert-bg-color-info: var(--tv-color-info-bg-light, #deecff);
|
||||
// info 主题时警告图标色
|
||||
--tv-Alert-icon-color-info: var(--tv-color-info-icon);
|
||||
--tv-Alert-icon-color-info: var(--tv-color-info-icon, #1476ff);
|
||||
// simple 主题时警告背景色
|
||||
--tv-Alert-bg-color-simple: var(--tv-color-bg);
|
||||
--tv-Alert-bg-color-simple: var(--tv-color-bg, #f5f5f5);
|
||||
// simple 主题时警告图标色
|
||||
--tv-Alert-icon-color-simple: var(--tv-color-icon);
|
||||
--tv-Alert-icon-color-simple: var(--tv-color-icon, #808080);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
*/
|
||||
|
||||
.inject-Amount-vars() {
|
||||
--tv-Amount-icon-color: var(--tv-color-icon);
|
||||
--tv-Amount-icon-size: var(--tv-icon-size);
|
||||
--tv-Amount-icon-color: var(--tv-color-icon, #808080);
|
||||
--tv-Amount-icon-size: var(--tv-icon-size, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,33 +12,33 @@
|
|||
|
||||
.inject-Badge-vars() {
|
||||
// 标记的圆角
|
||||
--tv-Badge-border-radius: var(--tv-border-radius-round);
|
||||
--tv-Badge-border-radius: var(--tv-border-radius-round, 999px);
|
||||
// 标记的内边距
|
||||
--tv-Badge-horizontal-padding: var(--tv-space-base);
|
||||
--tv-Badge-horizontal-padding: var(--tv-space-base, 4px);
|
||||
// 标记的尺寸
|
||||
--tv-Badge-font-size: var(--tv-font-size-sm);
|
||||
--tv-Badge-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 标记的字重
|
||||
--tv-Badge-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Badge-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 标记的文本色
|
||||
--tv-Badge-text-color: var(--tv-color-text-inverse);
|
||||
--tv-Badge-text-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// 标记的背景色
|
||||
--tv-Badge-bg-color: var(--tv-color-act-danger-bg);
|
||||
--tv-Badge-bg-color: var(--tv-color-act-danger-bg, #f23030);
|
||||
// 标记的边框色
|
||||
--tv-Badge-border-color: var(--tv-color-border-inverse-tint);
|
||||
--tv-Badge-border-color: var(--tv-color-border-inverse-tint, #ffffff);
|
||||
// 标记a标签的文本及悬浮文本色
|
||||
--tv-Badge-a-text-color: var(--tv-color-text-inverse);
|
||||
--tv-Badge-a-text-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// 标记左边距
|
||||
--tv-Badge-margin-left: var(--tv-space-sm);
|
||||
--tv-Badge-margin-left: var(--tv-space-sm, 4px);
|
||||
// 标记的小圆点背景色
|
||||
--tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg);
|
||||
--tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg, #f23030);
|
||||
// 标记的主要背景色
|
||||
--tv-Badge-primary-bg-color: var(--tv-color-bg-primary);
|
||||
--tv-Badge-primary-bg-color: var(--tv-color-bg-primary, #191919);
|
||||
// 标记的成功背景色
|
||||
--tv-Badge-success-bg-color: var(--tv-color-act-success-bg);
|
||||
--tv-Badge-success-bg-color: var(--tv-color-act-success-bg, #5cb300);
|
||||
// 标记的警告背景色
|
||||
--tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg);
|
||||
--tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg, #ff8800);
|
||||
// 标记的危险背景色
|
||||
--tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg);
|
||||
--tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg, #f23030);
|
||||
// 标记的信息背景色
|
||||
--tv-Badge-info-bg-color: var(--tv-color-act-info-bg);
|
||||
--tv-Badge-info-bg-color: var(--tv-color-act-info-bg, #1476ff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,11 +62,11 @@
|
|||
--tv-BaseSelect-collapse-icon-margin-left: var(--tv-space-xs, 2px);
|
||||
|
||||
// medium 尺寸的 tag 高度
|
||||
--tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg) - 8px);
|
||||
--tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg, 40px) - 8px);
|
||||
// 默认尺寸的 tag 高度
|
||||
--tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md) - 8px);
|
||||
--tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md, 32px) - 8px);
|
||||
// small 尺寸的tag高度
|
||||
--tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm) - 8px);
|
||||
--tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm, 28px) - 8px);
|
||||
// mini 尺寸的 tag 高度
|
||||
--tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs) - 8px);
|
||||
--tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs, 24px) - 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
|
||||
.inject-Breadcrumb-vars() {
|
||||
// 字号
|
||||
--tv-Breadcrumb-font-size: var(--tv-font-size-default);
|
||||
--tv-Breadcrumb-font-size: var(--tv-font-size-default, 14px);
|
||||
// 文本行高
|
||||
--tv-Breadcrumb-text-line-height: var(--tv-line-height-number);
|
||||
--tv-Breadcrumb-text-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 文本色
|
||||
--tv-Breadcrumb-text-color: var(--tv-color-text-control);
|
||||
--tv-Breadcrumb-text-color: var(--tv-color-text-control, #191919);
|
||||
// 选中文本色
|
||||
--tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3);
|
||||
--tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3, #191919);
|
||||
// 分隔符填充色
|
||||
--tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder);
|
||||
--tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder, #808080);
|
||||
// 分割箭头宽度
|
||||
--tv-Breadcrumb-separator-width: 16px;
|
||||
// 分隔图标的水平外边距
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
// 分隔图标的垂直外边距
|
||||
--tv-Breadcrumb-separator-margin-y: 0;
|
||||
// 当前节点字重
|
||||
--tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold, 600);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.inject-BulletinBoard-vars() {
|
||||
// 公告栏字号
|
||||
--tv-BulletinBoard-font-size: var(--tv-font-size-default);
|
||||
--tv-BulletinBoard-font-size: var(--tv-font-size-default, 14px);
|
||||
// 标题字号
|
||||
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
|
||||
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm, 18px);
|
||||
// 标题字重
|
||||
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 标题文字颜色
|
||||
--tv-BulletinBoard-title-text-color: var(--tv-color-text);
|
||||
--tv-BulletinBoard-title-text-color: var(--tv-color-text, #191919);
|
||||
// 子项文字颜色
|
||||
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
|
||||
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text, #191919);
|
||||
// tabs标题想文字hover字重
|
||||
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 子项标题文字字重
|
||||
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 子项日期文字颜色
|
||||
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
|
||||
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 子项日期文字尺寸
|
||||
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default);
|
||||
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default, 14px);
|
||||
// new标签背景颜色
|
||||
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
|
||||
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light, #fce3e1);
|
||||
// new标签文字颜色
|
||||
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
|
||||
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text, #f23030);
|
||||
// new标签边框圆角
|
||||
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
|
||||
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs, 2px);
|
||||
// new标签文字大小
|
||||
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
|
||||
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 更多按钮文字颜色
|
||||
--tv-BulletinBoard-more-text-color: var(--tv-color-text);
|
||||
--tv-BulletinBoard-more-text-color: var(--tv-color-text, #191919);
|
||||
// 更多按钮图标颜色
|
||||
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
|
||||
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon, #808080);
|
||||
// 更多按钮图标悬浮颜色
|
||||
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 更多按钮文字尺寸
|
||||
--tv-BulletinBoard-more-font-size: var(--tv-font-size-default);
|
||||
--tv-BulletinBoard-more-font-size: var(--tv-font-size-default, 14px);
|
||||
// 更多按钮图标尺寸
|
||||
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default);
|
||||
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default, 14px);
|
||||
// tabs标签文字颜色
|
||||
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
|
||||
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text, #191919);
|
||||
// tabs标签背景颜色
|
||||
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
|
||||
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary, #191919);
|
||||
// tabs标签文字禁用颜色
|
||||
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// tabs标签头部边框颜色
|
||||
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
|
||||
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border, #c2c2c2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,65 +12,65 @@
|
|||
|
||||
.inject-ButtonGroup-vars() {
|
||||
// 按钮组圆角
|
||||
--tv-ButtonGroup-border-radius: var(--tv-border-radius-md);
|
||||
--tv-ButtonGroup-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 按钮组字体行高
|
||||
--tv-ButtonGroup-line-height-number: var(--tv-line-height-number);
|
||||
--tv-ButtonGroup-line-height-number: var(--tv-line-height-number, 1.5);
|
||||
// 默认按钮未选中项背景色
|
||||
--tv-ButtonGroup-item-bg-color: var(--tv-color-bg);
|
||||
--tv-ButtonGroup-item-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 按钮非选中项文本色
|
||||
--tv-ButtonGroup-item-btn-text-color: var(--tv-color-text-secondary);
|
||||
--tv-ButtonGroup-item-btn-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 空数据文本色
|
||||
--tv-ButtonGroup-empty-text-color: var(--tv-color-text-weaken);
|
||||
--tv-ButtonGroup-empty-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 未指定尺寸的按钮项高度
|
||||
--tv-ButtonGroup-item-btn-height: var(--tv-size-height-md);
|
||||
--tv-ButtonGroup-item-btn-height: var(--tv-size-height-md, 32px);
|
||||
// 按钮组默认字号
|
||||
--tv-ButtonGroup-item-btn-font-size: var(--tv-font-size-default);
|
||||
--tv-ButtonGroup-item-btn-font-size: var(--tv-font-size-default, 14px);
|
||||
// 按钮项禁用背景色
|
||||
--tv-ButtonGroup-item-btn-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-ButtonGroup-item-btn-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 按钮项禁用文本色
|
||||
--tv-ButtonGroup-item-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-ButtonGroup-item-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 默认按钮项悬浮背景色
|
||||
--tv-ButtonGroup-item-btn-hover-bg-color: var(--tv-color-bg-hover-1);
|
||||
--tv-ButtonGroup-item-btn-hover-bg-color: var(--tv-color-bg-hover-1, #deecff);
|
||||
// 默认按钮非选中项悬浮文本色
|
||||
--tv-ButtonGroup-item-btn-hover-text-color: var(--tv-color-text);
|
||||
--tv-ButtonGroup-item-btn-hover-text-color: var(--tv-color-text, #191919);
|
||||
|
||||
// 朴素按钮非选中项悬浮/选中文本色
|
||||
--tv-ButtonGroup-item-btn-plain-text-color: var(--tv-color-text-active);
|
||||
--tv-ButtonGroup-item-btn-plain-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 按钮组圆角
|
||||
--tv-ButtonGroup-plain-border-color: var(--tv-color-border);
|
||||
--tv-ButtonGroup-plain-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 朴素按钮项悬浮背景色
|
||||
--tv-ButtonGroup-item-btn-plain-bg-color: var(--tv-color-bg-hover-1);
|
||||
--tv-ButtonGroup-item-btn-plain-bg-color: var(--tv-color-bg-hover-1, #deecff);
|
||||
// 朴素按钮非选中项悬浮边框色
|
||||
--tv-ButtonGroup-item-btn-plain-border-color: var(--tv-color-border-active-control);
|
||||
--tv-ButtonGroup-item-btn-plain-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
|
||||
// 默认按钮选中项背景色
|
||||
--tv-ButtonGroup-item-active-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-ButtonGroup-item-active-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 默认按钮选中项禁用时背景色
|
||||
--tv-ButtonGroup-item-active-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
|
||||
--tv-ButtonGroup-item-active-disabled-bg-color: var(--tv-color-bg-disabled-control-checked, #dbdbdb);
|
||||
// 默认按钮选中项文本色
|
||||
--tv-ButtonGroup-item-active-text-color: var(--tv-color-text-inverse-active);
|
||||
--tv-ButtonGroup-item-active-text-color: var(--tv-color-text-inverse-active, #ffffff);
|
||||
// 默认按钮内间距
|
||||
--tv-ButtonGroup-btn-padding-x: 24px;
|
||||
// 按钮角标高度
|
||||
--tv-ButtonGroup-item-sup-height: 18px;
|
||||
// 小尺寸按钮圆角
|
||||
--tv-ButtonGroup-mini-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-ButtonGroup-mini-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 按钮角标字体颜色
|
||||
--tv-ButtonGroup-item-sup-font-color: var(--tv-color-text-inverse);
|
||||
--tv-ButtonGroup-item-sup-font-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// 按钮角标字体大小
|
||||
--tv-ButtonGroup-item-sup-font-size: var(--tv-font-size-default);
|
||||
--tv-ButtonGroup-item-sup-font-size: var(--tv-font-size-default, 14px);
|
||||
|
||||
// medium尺寸
|
||||
--tv-ButtonGroup-medium-size: var(--tv-size-height-lg);
|
||||
--tv-ButtonGroup-medium-size: var(--tv-size-height-lg, 40px);
|
||||
// small尺寸
|
||||
--tv-ButtonGroup-small-size: var(--tv-size-height-sm);
|
||||
--tv-ButtonGroup-small-size: var(--tv-size-height-sm, 28px);
|
||||
// mini 尺寸
|
||||
--tv-ButtonGroup-mini-size: var(--tv-size-height-xs);
|
||||
--tv-ButtonGroup-mini-size: var(--tv-size-height-xs, 24px);
|
||||
// mini 尺寸按钮组按钮字号
|
||||
--tv-ButtonGroup-mini-font-size: var(--tv-font-size-sm);
|
||||
--tv-ButtonGroup-mini-font-size: var(--tv-font-size-sm, 12px);
|
||||
// mini 尺寸按钮内间距
|
||||
--tv-ButtonGroup-mini-padding-x: 16px;
|
||||
|
||||
// 更多下拉框选项悬浮背景色
|
||||
--tv-ButtonGroup-more-item-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-ButtonGroup-more-item-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,24 @@
|
|||
//-------------------------------------------------------全局场景：------------------------------------------
|
||||
|
||||
// 默认时按钮字重
|
||||
--tv-Button-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Button-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 默认时按钮边框宽度
|
||||
--tv-Button-border-width: var(--tv-border-width);
|
||||
--tv-Button-border-width: var(--tv-border-width, 1px);
|
||||
// 按钮的文本行高
|
||||
--tv-Button-line-height: var(--tv-line-height-number);
|
||||
--tv-Button-line-height: var(--tv-line-height-number, 1.5);
|
||||
// --------------------------------------------------- 场景1、圆角--------------------------------------------
|
||||
// 默认时按钮圆角
|
||||
--tv-Button-border-radius: var(--tv-border-radius-md); // 默认还原为6px
|
||||
--tv-Button-border-radius: var(--tv-border-radius-md, 6px); // 默认还原为6px
|
||||
// 大圆角时按钮圆角
|
||||
--tv-Button-border-radius-round: var(--tv-border-radius-round);
|
||||
--tv-Button-border-radius-round: var(--tv-border-radius-round, 999px);
|
||||
// 圆形时按钮圆角
|
||||
--tv-Button-border-radius-circle: var(--tv-border-radius-round); // 50% 会造成椭圆，此次common变量用 999px代替
|
||||
--tv-Button-border-radius-circle: var(--tv-border-radius-round, 999px); // 50% 会造成椭圆，此次common变量用 999px代替
|
||||
|
||||
//--------------------------------------------------- 场景2、尺寸 height, font-size,padding-x,min-width,仅图标时的 icon-size
|
||||
// 默认时按钮字号
|
||||
--tv-Button-font-size: var(--tv-font-size-default);
|
||||
--tv-Button-font-size: var(--tv-font-size-default, 14px);
|
||||
// 默认时按钮高度
|
||||
--tv-Button-height: var(--tv-size-height-md);
|
||||
--tv-Button-height: var(--tv-size-height-md, 32px);
|
||||
// 默认时按钮水平间距
|
||||
--tv-Button-padding-x: 24px; // space变量不存在，是否替换成 space-base * 6 这种？
|
||||
// 默认时按钮最小宽度
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
// 默认时按钮内图标的大小
|
||||
--tv-Button-size-icon-font-size: 18px;
|
||||
// 超大按钮字号
|
||||
--tv-Button-font-size-large: var(--tv-font-size-default);
|
||||
--tv-Button-font-size-large: var(--tv-font-size-default, 14px);
|
||||
// 超大按钮高度
|
||||
--tv-Button-height-large: var(--tv-size-height-xl);
|
||||
--tv-Button-height-large: var(--tv-size-height-xl, 48px);
|
||||
// 超大按钮水平间距
|
||||
--tv-Button-padding-x-large: 48px;
|
||||
// 超大按钮最小宽度
|
||||
|
|
@ -48,9 +48,9 @@
|
|||
// 超大按钮内图标的大小
|
||||
--tv-Button-size-icon-font-size-large: 28px;
|
||||
// 中等按钮字号
|
||||
--tv-Button-font-size-medium: var(--tv-font-size-default);
|
||||
--tv-Button-font-size-medium: var(--tv-font-size-default, 14px);
|
||||
// 中等按钮高度
|
||||
--tv-Button-height-medium: var(--tv-size-height-lg);
|
||||
--tv-Button-height-medium: var(--tv-size-height-lg, 40px);
|
||||
// 中等按钮水平间距
|
||||
--tv-Button-padding-x-medium: 32px;
|
||||
// 中等按钮最小宽度
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
// 中等按钮内图标的大小
|
||||
--tv-Button-size-icon-font-size-medium: 24px;
|
||||
// 小型按钮字号
|
||||
--tv-Button-font-size-small: var(--tv-font-size-sm);
|
||||
--tv-Button-font-size-small: var(--tv-font-size-sm, 12px);
|
||||
// 小型按钮高度
|
||||
--tv-Button-height-small: var(--tv-size-height-sm);
|
||||
--tv-Button-height-small: var(--tv-size-height-sm, 28px);
|
||||
// 小型按钮水平间距
|
||||
--tv-Button-padding-x-small: 16px;
|
||||
// 小型按钮最小宽度
|
||||
|
|
@ -68,9 +68,9 @@
|
|||
// 小型按钮内图标的大小
|
||||
--tv-Button-size-icon-font-size-small: 16px;
|
||||
// 超小按钮字号
|
||||
--tv-Button-font-size-mini: var(--tv-font-size-sm);
|
||||
--tv-Button-font-size-mini: var(--tv-font-size-sm, 12px);
|
||||
// 超小按钮高度
|
||||
--tv-Button-height-mini: var(--tv-size-height-xs);
|
||||
--tv-Button-height-mini: var(--tv-size-height-xs, 24px);
|
||||
// 超小按钮水平间距
|
||||
--tv-Button-padding-x-mini: 16px;
|
||||
// 超小按钮最小宽度
|
||||
|
|
@ -83,102 +83,102 @@
|
|||
// 1、ghost中只影响 bg 2、active 只影响（主题+plain) 3、 disabled 优先级高过 （主题+plain+激活)
|
||||
|
||||
// 默认时按钮文本色
|
||||
--tv-Button-text-color-default: var(--tv-color-text);
|
||||
--tv-Button-text-color-default: var(--tv-color-text, #191919);
|
||||
// 默认时按钮背景色
|
||||
--tv-Button-bg-color-default: var(--tv-color-bg-secondary);
|
||||
--tv-Button-bg-color-default: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 默认时按钮边框色
|
||||
--tv-Button-border-color-default: var(--tv-color-border-secondary);
|
||||
--tv-Button-border-color-default: var(--tv-color-border-secondary, #595959);
|
||||
// 默认时按钮图标色
|
||||
--tv-Button-icon-color-default: var(--tv-color-icon-control);
|
||||
--tv-Button-icon-color-default: var(--tv-color-icon-control, #191919);
|
||||
|
||||
// primary 主题时按钮文本色
|
||||
--tv-Button-text-color-primary: var(--tv-color-act-primary-text-inverse-tint);
|
||||
--tv-Button-text-color-primary: var(--tv-color-act-primary-text-inverse-tint, #ffffff);
|
||||
// primary 主题时按钮背景色
|
||||
--tv-Button-bg-color-primary: var(--tv-color-act-primary-bg);
|
||||
--tv-Button-bg-color-primary: var(--tv-color-act-primary-bg, #191919);
|
||||
// primary 主题时按钮边框色
|
||||
--tv-Button-border-color-primary: var(--tv-color-act-primary-border);
|
||||
--tv-Button-border-color-primary: var(--tv-color-act-primary-border, #191919);
|
||||
// primary 主题时按钮图标色
|
||||
--tv-Button-icon-color-primary: var(--tv-color-icon-inverse-tint);
|
||||
--tv-Button-icon-color-primary: var(--tv-color-icon-inverse-tint, #ffffff);
|
||||
|
||||
// success 主题时按钮文本色
|
||||
--tv-Button-text-color-success: var(--tv-color-act-success-text-white);
|
||||
--tv-Button-text-color-success: var(--tv-color-act-success-text-white, #ffffff);
|
||||
// success 主题时按钮背景色
|
||||
--tv-Button-bg-color-success: var(--tv-color-act-success-bg);
|
||||
--tv-Button-bg-color-success: var(--tv-color-act-success-bg, #5cb300);
|
||||
// success 主题时按钮边框色
|
||||
--tv-Button-border-color-success: var(--tv-color-act-success-border);
|
||||
--tv-Button-border-color-success: var(--tv-color-act-success-border, #5cb300);
|
||||
// success 主题时按钮图标色
|
||||
--tv-Button-icon-color-success: var(--tv-color-icon-inverse);
|
||||
--tv-Button-icon-color-success: var(--tv-color-icon-inverse, #ffffff);
|
||||
|
||||
// warning 主题时按钮文本色
|
||||
--tv-Button-text-color-warning: var(--tv-color-act-warning-text-white);
|
||||
--tv-Button-text-color-warning: var(--tv-color-act-warning-text-white, #ffffff);
|
||||
// warning 主题时按钮背景色
|
||||
--tv-Button-bg-color-warning: var(--tv-color-act-warning-bg);
|
||||
--tv-Button-bg-color-warning: var(--tv-color-act-warning-bg, #ff8800);
|
||||
// warning 主题时按钮边框色
|
||||
--tv-Button-border-color-warning: var(--tv-color-act-warning-border);
|
||||
--tv-Button-border-color-warning: var(--tv-color-act-warning-border, #ff8800);
|
||||
// warning 主题时按钮图标色
|
||||
--tv-Button-icon-color-warning: var(--tv-color-icon-inverse);
|
||||
--tv-Button-icon-color-warning: var(--tv-color-icon-inverse, #ffffff);
|
||||
|
||||
// danger 主题时按钮文本色
|
||||
--tv-Button-text-color-danger: var(--tv-color-act-danger-text-white);
|
||||
--tv-Button-text-color-danger: var(--tv-color-act-danger-text-white, #ffffff);
|
||||
// danger 主题时按钮背景色
|
||||
--tv-Button-bg-color-danger: var(--tv-color-act-danger-bg);
|
||||
--tv-Button-bg-color-danger: var(--tv-color-act-danger-bg, #f23030);
|
||||
// danger 主题时按钮边框色
|
||||
--tv-Button-border-color-danger: var(--tv-color-act-danger-border);
|
||||
--tv-Button-border-color-danger: var(--tv-color-act-danger-border, #f23030);
|
||||
// danger 主题时按钮图标色
|
||||
--tv-Button-icon-color-danger: var(--tv-color-icon-inverse);
|
||||
--tv-Button-icon-color-danger: var(--tv-color-icon-inverse, #ffffff);
|
||||
|
||||
// info 主题时按钮文本色
|
||||
--tv-Button-text-color-info: var(--tv-color-act-info-text-white);
|
||||
--tv-Button-text-color-info: var(--tv-color-act-info-text-white, #ffffff);
|
||||
// info 主题时按钮背景色
|
||||
--tv-Button-bg-color-info: var(--tv-color-act-info-bg);
|
||||
--tv-Button-bg-color-info: var(--tv-color-act-info-bg, #1476ff);
|
||||
// info 主题时按钮边框色
|
||||
--tv-Button-border-color-info: var(--tv-color-act-info-border);
|
||||
--tv-Button-border-color-info: var(--tv-color-act-info-border, #1476ff);
|
||||
// info 主题时按钮图标色
|
||||
--tv-Button-icon-color-info: var(--tv-color-icon-inverse);
|
||||
--tv-Button-icon-color-info: var(--tv-color-icon-inverse, #ffffff);
|
||||
|
||||
// ------------------------------------------------------------- level 1结束 -----------------------------------
|
||||
|
||||
// 默认时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-default: var(--tv-color-text);
|
||||
--tv-Button-text-color-plain-default: var(--tv-color-text, #191919);
|
||||
// 默认时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-default: var(--tv-color-bg);
|
||||
--tv-Button-bg-color-plain-default: var(--tv-color-bg, #f5f5f5);
|
||||
// 默认时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-default: var(--tv-color-border);
|
||||
--tv-Button-border-color-plain-default: var(--tv-color-border, #c2c2c2);
|
||||
|
||||
// primary 主题时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-primary: var(--tv-color-act-primary-text);
|
||||
--tv-Button-text-color-plain-primary: var(--tv-color-act-primary-text, #191919);
|
||||
// primary 主题时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-primary: var(--tv-color-act-primary-bg-white);
|
||||
--tv-Button-bg-color-plain-primary: var(--tv-color-act-primary-bg-white, #ffffff);
|
||||
// primary 主题时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-light);
|
||||
--tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-light, #595959);
|
||||
|
||||
// success 主题时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-success: var(--tv-color-act-success-text);
|
||||
--tv-Button-text-color-plain-success: var(--tv-color-act-success-text, #5cb300);
|
||||
// success 主题时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-success: var(--tv-color-act-success-bg-light);
|
||||
--tv-Button-bg-color-plain-success: var(--tv-color-act-success-bg-light, #edf7df);
|
||||
// success 主题时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-success: var(--tv-color-act-success-border-light);
|
||||
--tv-Button-border-color-plain-success: var(--tv-color-act-success-border-light, #daf2bb);
|
||||
|
||||
// warning 主题时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-warning: var(--tv-color-act-warning-text);
|
||||
--tv-Button-text-color-plain-warning: var(--tv-color-act-warning-text, #ff8800);
|
||||
// warning 主题时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-warning: var(--tv-color-act-warning-bg-light);
|
||||
--tv-Button-bg-color-plain-warning: var(--tv-color-act-warning-bg-light, #fff4e8);
|
||||
// warning 主题时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-light);
|
||||
--tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-light, #ffebd1);
|
||||
|
||||
// danger 主题时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-danger: var(--tv-color-act-danger-text);
|
||||
--tv-Button-text-color-plain-danger: var(--tv-color-act-danger-text, #f23030);
|
||||
// danger 主题时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-danger: var(--tv-color-act-danger-bg-light);
|
||||
--tv-Button-bg-color-plain-danger: var(--tv-color-act-danger-bg-light, #fff1f0);
|
||||
// danger 主题时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-light);
|
||||
--tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-light, #fce2e0);
|
||||
|
||||
// info 主题时按钮朴素文本色
|
||||
--tv-Button-text-color-plain-info: var(--tv-color-act-info-text);
|
||||
--tv-Button-text-color-plain-info: var(--tv-color-act-info-text, #1476ff);
|
||||
// info 主题时按钮朴素背景色
|
||||
--tv-Button-bg-color-plain-info: var(--tv-color-act-info-bg-light);
|
||||
--tv-Button-bg-color-plain-info: var(--tv-color-act-info-bg-light, #f0f7ff);
|
||||
// info 主题时按钮朴素边框色
|
||||
--tv-Button-border-color-plain-info: var(--tv-color-act-info-border-light);
|
||||
--tv-Button-border-color-plain-info: var(--tv-color-act-info-border-light, #deecff);
|
||||
|
||||
// 幽灵态和plain是平级的关系. 如果同时存在，优先级不能保证稳定。
|
||||
|
||||
|
|
@ -186,137 +186,137 @@
|
|||
--tv-Button-bg-color-ghost: transparent; // 只影响 bg 和 text-color, 且bg全部为透明.
|
||||
|
||||
// 默认时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-default: var(--tv-color-text-secondary);
|
||||
--tv-Button-text-color-ghost-default: var(--tv-color-text-secondary, #595959);
|
||||
// 默认时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-default: var(--tv-color-border-ghost);
|
||||
--tv-Button-border-color-ghost-default: var(--tv-color-border-ghost, #808080);
|
||||
|
||||
// primary 主题时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-primary: var(--tv-color-act-primary-text);
|
||||
--tv-Button-text-color-ghost-primary: var(--tv-color-act-primary-text, #191919);
|
||||
// primary 主题时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-primary: var(--tv-color-act-primary-border-light);
|
||||
--tv-Button-border-color-ghost-primary: var(--tv-color-act-primary-border-light, #595959);
|
||||
|
||||
// success 主题时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-success: var(--tv-color-act-success-text);
|
||||
--tv-Button-text-color-ghost-success: var(--tv-color-act-success-text, #5cb300);
|
||||
// success 主题时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-success: var(--tv-color-act-success-border);
|
||||
--tv-Button-border-color-ghost-success: var(--tv-color-act-success-border, #5cb300);
|
||||
|
||||
// warning 主题时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-warning: var(--tv-color-act-warning-text);
|
||||
--tv-Button-text-color-ghost-warning: var(--tv-color-act-warning-text, #ff8800);
|
||||
// warning 主题时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-warning: var(--tv-color-act-warning-border);
|
||||
--tv-Button-border-color-ghost-warning: var(--tv-color-act-warning-border, #ff8800);
|
||||
|
||||
// danger 主题时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-danger: var(--tv-color-act-danger-text);
|
||||
--tv-Button-text-color-ghost-danger: var(--tv-color-act-danger-text, #f23030);
|
||||
// danger 主题时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-danger: var(--tv-color-act-danger-border);
|
||||
--tv-Button-border-color-ghost-danger: var(--tv-color-act-danger-border, #f23030);
|
||||
|
||||
// info 主题时按钮幽灵文本色
|
||||
--tv-Button-text-color-ghost-info: var(--tv-color-act-info-text);
|
||||
--tv-Button-text-color-ghost-info: var(--tv-color-act-info-text, #1476ff);
|
||||
// info 主题时按钮幽灵边框色
|
||||
--tv-Button-border-color-ghost-info: var(--tv-color-act-info-border);
|
||||
--tv-Button-border-color-ghost-info: var(--tv-color-act-info-border, #1476ff);
|
||||
|
||||
//------------------------------------------------------------------------------ // level 2结束 ----------------
|
||||
|
||||
// 默认时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary); // 现规范，激活态时，只影响边框和背景
|
||||
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary, #ffffff); // 现规范，激活态时，只影响边框和背景
|
||||
// 默认时按钮激活的边框色
|
||||
--tv-Button-border-color-active-default: var(--tv-color-border-secondary-hover);
|
||||
--tv-Button-border-color-active-default: var(--tv-color-border-secondary-hover, #c2c2c2);
|
||||
// 默认时按钮激活的文本
|
||||
--tv-Button-text-color-active-default: var(--tv-color-text);
|
||||
--tv-Button-text-color-active-default: var(--tv-color-text, #191919);
|
||||
// 默认时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-default: var(--tv-color-bg);
|
||||
--tv-Button-bg-color-plain-active-default: var(--tv-color-bg, #f5f5f5);
|
||||
// 默认时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框，所以等于背景色。
|
||||
--tv-Button-border-color-plain-active-default: var(--tv-color-bg, #f5f5f5); // 朴素激活都无边框，所以等于背景色。
|
||||
// 默认时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-default: var(--tv-color-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-default: var(--tv-color-plain-text-hover, #191919);
|
||||
// 默认时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active);
|
||||
--tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active, #dbdbdb);
|
||||
|
||||
// primary 主题时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-hover);
|
||||
--tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-hover, #595959);
|
||||
// primary 主题时按钮激活的边框色
|
||||
--tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-hover);
|
||||
--tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-hover, #595959);
|
||||
// primary 主题时按钮激活的文本色
|
||||
--tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-inverse-tint-active);
|
||||
--tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-inverse-tint-active, #ffffff);
|
||||
// primary 主题时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover);
|
||||
--tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover, #ffffff);
|
||||
// primary 主题时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover); // 无边框
|
||||
--tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover, #ffffff); // 无边框
|
||||
// primary 主题时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover, #191919);
|
||||
// primary 主题时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover);
|
||||
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover, #191919);
|
||||
|
||||
// success 主题时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-hover);
|
||||
--tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-hover, #7dcc29);
|
||||
// success 主题时按钮激活的边框色
|
||||
--tv-Button-border-color-active-success: var(--tv-color-act-success-border-hover);
|
||||
--tv-Button-border-color-active-success: var(--tv-color-act-success-border-hover, #7dcc29);
|
||||
// success 主题时按钮激活的文本色
|
||||
--tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active);
|
||||
--tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active, #ffffff);
|
||||
// success 主题时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-hover);
|
||||
--tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-hover, #edf7df);
|
||||
// success 主题时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-hover); // 无边框
|
||||
--tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-hover, #edf7df); // 无边框
|
||||
// success 主题时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover, #5cb300);
|
||||
// success 主题时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-hover-1);
|
||||
--tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-hover-1, #daf2bb);
|
||||
|
||||
// warning 主题时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active);
|
||||
--tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active, #ff9a2e);
|
||||
// warning 主题时按钮激活的边框色
|
||||
--tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-hover);
|
||||
--tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-hover, #ff9a2e);
|
||||
// warning 主题时按钮激活的文本色
|
||||
--tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active);
|
||||
--tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active, #ffffff);
|
||||
// warning 主题时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover);
|
||||
--tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover, #fff4e8);
|
||||
// warning 主题时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover); // 无边框
|
||||
--tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover, #fff4e8); // 无边框
|
||||
// warning 主题时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover, #ff8800);
|
||||
// warning 主题时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1);
|
||||
--tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1, #ffebd1);
|
||||
|
||||
// danger 主题时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-hover);
|
||||
--tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-hover, #f76360);
|
||||
// danger 主题时按钮激活的边框色
|
||||
--tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-hover);
|
||||
--tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-hover, #f76360);
|
||||
// danger 主题时按钮激活的文本色
|
||||
--tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active);
|
||||
--tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active, #ffffff);
|
||||
// danger 主题时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover);
|
||||
--tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover, #fff1f0);
|
||||
// danger 主题时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover);
|
||||
--tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover, #fff1f0);
|
||||
// danger 主题时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover, #f23030);
|
||||
// danger 主题时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-hover-1);
|
||||
--tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-hover-1, #fce2e0);
|
||||
|
||||
// info 主题时按钮激活的背景色
|
||||
--tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active);
|
||||
--tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active, #4191fa);
|
||||
// info 主题时按钮激活的边框色
|
||||
--tv-Button-border-color-active-info: var(--tv-color-act-info-border-active);
|
||||
--tv-Button-border-color-active-info: var(--tv-color-act-info-border-active, #4191fa);
|
||||
// info 主题时按钮激活的文本色
|
||||
--tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active);
|
||||
--tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active, #ffffff);
|
||||
// info 主题时按钮激活的朴素背景色
|
||||
--tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-hover);
|
||||
--tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-hover, #f0f7ff);
|
||||
// info 主题时按钮激活的朴素边框色
|
||||
--tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
|
||||
--tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active, #f0f7ff);
|
||||
// info 主题时按钮激活的朴素文本色
|
||||
--tv-Button-text-color-plain-active-info: var(--tv-color-act-info-plain-text-hover);
|
||||
--tv-Button-text-color-plain-active-info: var(--tv-color-act-info-plain-text-hover, #1476ff);
|
||||
// info 主题时按钮激活的幽灵边框色
|
||||
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1); // level3 结束------
|
||||
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1, #deecff); // level3 结束------
|
||||
|
||||
// 禁用时按钮文本色
|
||||
--tv-Button-text-color-disabled: var(--tv-color-text-disabled); // 目前规则下，disabled优先级最高，所以变量少
|
||||
--tv-Button-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); // 目前规则下，disabled优先级最高，所以变量少
|
||||
// 禁用时按钮背景色
|
||||
--tv-Button-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Button-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 禁用时按钮边框色
|
||||
--tv-Button-border-color-disabled: var(--tv-color-bg-disabled); // 设计边框是f0f0f0，没这个值，用背景色代替。
|
||||
--tv-Button-border-color-disabled: var(--tv-color-bg-disabled, #f0f0f0); // 设计边框是f0f0f0，没这个值，用背景色代替。
|
||||
// 禁用时, 幽灵按钮的边框色
|
||||
--tv-Button-border-color-ghost-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Button-border-color-ghost-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 禁用时按钮图标色
|
||||
--tv-Button-icon-color-disabled: var(--tv-color-icon-disabled); // level4 结束---------------------------
|
||||
--tv-Button-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2); // level4 结束---------------------------
|
||||
|
||||
//------------------------------------------------------ 场景4、图标 + text----------------------------------------------
|
||||
// 仅图标：
|
||||
|
|
@ -330,45 +330,45 @@
|
|||
// <img>+ 文字
|
||||
|
||||
// 仅图标且default主题时， 外边框的颜色
|
||||
--tv-Button-border-color-only-icon-default: var(--tv-color-border);
|
||||
--tv-Button-border-color-only-icon-default: var(--tv-color-border, #c2c2c2);
|
||||
// 仅图标且default主题时， 外边框的悬浮色
|
||||
--tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-hover);
|
||||
--tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-hover, #191919);
|
||||
// 仅图标且有边框时，边框的圆角大
|
||||
--tv-Button-border-radius-only-icon: var(--tv-border-radius-md);
|
||||
--tv-Button-border-radius-only-icon: var(--tv-border-radius-md, 6px);
|
||||
|
||||
// 仅图标且无边框时，背景阴影的圆角
|
||||
--tv-Button-border-radius-only-icon-ontext: var(--tv-border-radius-sm);
|
||||
--tv-Button-border-radius-only-icon-ontext: var(--tv-border-radius-sm, 4px);
|
||||
// 仅图标-无边框的背景色
|
||||
--tv-Button-bg-color-only-icon-ontext: transparent;
|
||||
// 仅图标-无边框的悬浮时的背景色
|
||||
--tv-Button-bg-color-only-icon-ontext-hover: var(--tv-color-bg);
|
||||
--tv-Button-bg-color-only-icon-ontext-hover: var(--tv-color-bg, #f5f5f5);
|
||||
|
||||
// 有图标-图标颜色
|
||||
--tv-Button-icon-color: var(--tv-color-icon);
|
||||
--tv-Button-icon-color: var(--tv-color-icon, #808080);
|
||||
|
||||
// 纯文字时，文字颜色
|
||||
--tv-Button-text-color-ontext: var(--tv-color-text-link); // 蓝色文字
|
||||
--tv-Button-text-color-ontext: var(--tv-color-text-link, #1476ff); // 蓝色文字
|
||||
// 纯文字时，文字的禁用色
|
||||
--tv-Button-text-color-ontext-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Button-text-color-ontext-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 纯文字时，字体大小
|
||||
--tv-Button-font-size-ontext: var(--tv-font-size-default);
|
||||
--tv-Button-font-size-ontext: var(--tv-font-size-default, 14px);
|
||||
|
||||
// 混排有边框和无边框时，图标右边距
|
||||
--tv-Button-margin-right-isicon-svg: var(--tv-space-sm);
|
||||
--tv-Button-margin-right-isicon-svg: var(--tv-space-sm, 4px);
|
||||
|
||||
// 混排无边框时,文字的颜色
|
||||
--tv-Button-text-color-isicon-ontext: var(--tv-color-text-control); // 黑色文字
|
||||
--tv-Button-text-color-isicon-ontext: var(--tv-color-text-control, #191919); // 黑色文字
|
||||
// 混排无边框时,文字的禁用色
|
||||
--tv-Button-text-color-isicon-ontext-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Button-text-color-isicon-ontext-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
//混排无边框时，字体大小
|
||||
--tv-Button-font-size-isicon-ontext: var(--tv-font-size-default);
|
||||
--tv-Button-font-size-isicon-ontext: var(--tv-font-size-default, 14px);
|
||||
|
||||
//------------------------------------------------------ 场景5、 其它场景-----------------------------------------
|
||||
// 相邻按钮的默认的左外边距
|
||||
--tv-Button-margin-left-btn-to-btn-md: var(--tv-space-md);
|
||||
--tv-Button-margin-left-btn-to-btn-md: var(--tv-space-md, 8px);
|
||||
// 相邻大按钮的默认的左外边距
|
||||
--tv-Button-margin-left-btn-to-btn-lg: var(--tv-space-xl);
|
||||
--tv-Button-margin-left-btn-to-btn-lg: var(--tv-space-xl, 16px);
|
||||
|
||||
// loading时，svg的右外边距
|
||||
--tv-Button-margin-right-isloading-svg: var(--tv-space-sm); // loading时，svg的右外边距
|
||||
--tv-Button-margin-right-isloading-svg: var(--tv-space-sm, 4px); // loading时，svg的右外边距
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,95 +12,95 @@
|
|||
|
||||
.inject-CalendarView-vars() {
|
||||
// 视图容器、背景色
|
||||
--tv-CalendarView-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-CalendarView-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日历容器与内容的间距
|
||||
--tv-CalendarView-padding: var(--tv-space-xxxl);
|
||||
--tv-CalendarView-padding: var(--tv-space-xxxl, 32px);
|
||||
// picker右边距
|
||||
--tv-CalendarView-picker-right-bottom: var(--tv-space-md);
|
||||
--tv-CalendarView-picker-right-bottom: var(--tv-space-md, 8px);
|
||||
// radio 文本色、背景色、悬浮色
|
||||
--tv-CalendarView-radio-font-size: var(--tv-font-size-lg);
|
||||
--tv-CalendarView-radio-icon-color: var(--tv-color-icon);
|
||||
--tv-CalendarView-radio-font-size: var(--tv-font-size-lg, 16px);
|
||||
--tv-CalendarView-radio-icon-color: var(--tv-color-icon, #808080);
|
||||
--tv-CalendarView-radio-icon-bg-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
--tv-CalendarView-radio-active-icon-color: var(--tv-color-text-control);
|
||||
--tv-CalendarView-radio-active-icon-color: var(--tv-color-text-control, #191919);
|
||||
--tv-CalendarView-radio-active-inner-bg-color: var(--tv-color-bg-3, #fff);
|
||||
--tv-CalendarView-radio-active-border-color: var(--tv-color-border-active);
|
||||
--tv-CalendarView-header-main-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-header-main-text-color: var(--tv-color-text-weaken);
|
||||
--tv-CalendarView-radio-active-border-color: var(--tv-color-border-active, #191919);
|
||||
--tv-CalendarView-header-main-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CalendarView-header-main-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// main 间距、
|
||||
--tv-CalendarView-main-margin-top: var(--tv-space-xs);
|
||||
--tv-CalendarView-main-margin-top: var(--tv-space-xs, 2px);
|
||||
// 日期字号、间距、颜色、背景色
|
||||
--tv-CalendarView-main-li-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-date-margin-left: var(--tv-space-xl);
|
||||
--tv-CalendarView-date-text-color: var(--tv-color-text);
|
||||
--tv-CalendarView-date-border-color: var(--tv-color-border);
|
||||
--tv-CalendarView-date-weaken-text-color: var(--tv-color-text-weaken);
|
||||
--tv-CalendarView-main-li-padding: var(--tv-space-xs);
|
||||
--tv-CalendarView-main-li-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-CalendarView-main-li-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CalendarView-date-margin-left: var(--tv-space-xl, 16px);
|
||||
--tv-CalendarView-date-text-color: var(--tv-color-text, #191919);
|
||||
--tv-CalendarView-date-border-color: var(--tv-color-border, #c2c2c2);
|
||||
--tv-CalendarView-date-weaken-text-color: var(--tv-color-text-weaken, #808080);
|
||||
--tv-CalendarView-main-li-padding: var(--tv-space-xs, 2px);
|
||||
--tv-CalendarView-main-li-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日期选中背景色，悬浮色
|
||||
--tv-CalendarView-date-selected-text-color: var(--tv-color-text-active);
|
||||
--tv-CalendarView-li-selected-bg-color: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-CalendarView-date-selected-text-color: var(--tv-color-text-active, #1476ff);
|
||||
--tv-CalendarView-li-selected-bg-color: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 选中
|
||||
--tv-CalendarView-selected-bg-color-hover: var(--tv-color-bg-active-control);
|
||||
--tv-CalendarView-selected-icon-color: var(--tv-color-icon-control-active);
|
||||
--tv-CalendarView-selected-icon-size: var(--tv-font-size-lg);
|
||||
--tv-CalendarView-selected-bg-color-hover: var(--tv-color-bg-active-control, #1476ff);
|
||||
--tv-CalendarView-selected-icon-color: var(--tv-color-icon-control-active, #1476ff);
|
||||
--tv-CalendarView-selected-icon-size: var(--tv-font-size-lg, 16px);
|
||||
// 未选中
|
||||
--tv-CalendarView-bg-color-unselected-hover: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-CalendarView-bg-color-unselected-hover: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 箭头间距颜色
|
||||
--tv-CalendarView-header-icon-color: var(--tv-color-icon);
|
||||
--tv-CalendarView-header-icon-color: var(--tv-color-icon, #808080);
|
||||
// 日程
|
||||
--tv-CalendarView-events-item-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-events-item-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-CalendarView-events-item-text-color: var(--tv-color-text);
|
||||
--tv-CalendarView-events-item-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CalendarView-events-item-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-CalendarView-events-item-text-color: var(--tv-color-text, #191919);
|
||||
// 提示字号、字重、颜色
|
||||
--tv-CalendarView-tooltip-main-padding: var(--tv-space-xl);
|
||||
--tv-CalendarView-tooltip-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-CalendarView-tooltip-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-CalendarView-tooltip-date-text-color: var(--tv-color-text-secondary);
|
||||
--tv-CalendarView-tooltip-main-padding: var(--tv-space-xl, 16px);
|
||||
--tv-CalendarView-tooltip-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
--tv-CalendarView-tooltip-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-CalendarView-tooltip-date-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 禁用文字颜色
|
||||
--tv-CalendarView-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-CalendarView-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// events日程版型
|
||||
--tv-CalendarView-event-container-margin-bottom: var(--tv-space-xs);
|
||||
--tv-CalendarView-event-start-padding: var(--tv-space-xs);
|
||||
--tv-CalendarView-event-container-margin-bottom: var(--tv-space-xs, 2px);
|
||||
--tv-CalendarView-event-start-padding: var(--tv-space-xs, 2px);
|
||||
// events 内容样式
|
||||
--tv-CalendarView-event-title-font-size: var(--tv-font-size-sm);
|
||||
--tv-CalendarView-event-title-text-color: var(--tv-color-text);
|
||||
--tv-CalendarView-event-title-font-size: var(--tv-font-size-sm, 12px);
|
||||
--tv-CalendarView-event-title-text-color: var(--tv-color-text, #191919);
|
||||
// week模式date样式
|
||||
--tv-CalendarView-week-date-font-size: var(--tv-font-size-lg);
|
||||
--tv-CalendarView-week-date-text-color: var(--tv-color-text);
|
||||
--tv-CalendarView-week-date-today-text-color: var(--tv-color-text-active);
|
||||
--tv-CalendarView-week-day-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-week-date-font-size: var(--tv-font-size-lg, 16px);
|
||||
--tv-CalendarView-week-date-text-color: var(--tv-color-text, #191919);
|
||||
--tv-CalendarView-week-date-today-text-color: var(--tv-color-text-active, #1476ff);
|
||||
--tv-CalendarView-week-day-font-size: var(--tv-font-size-default, 14px);
|
||||
// mark标记样式
|
||||
--tv-CalendarView-mark-bg-color: var(--tv-color-error-bg);
|
||||
--tv-CalendarView-mark-left: var(--tv-space-xs);
|
||||
--tv-CalendarView-mark-border-radius: var(--tv-border-radius-round);
|
||||
--tv-CalendarView-mark-digit-left: var(--tv-space-md);
|
||||
--tv-CalendarView-mark-bg-color: var(--tv-color-error-bg, #f23030);
|
||||
--tv-CalendarView-mark-left: var(--tv-space-xs, 2px);
|
||||
--tv-CalendarView-mark-border-radius: var(--tv-border-radius-round, 999px);
|
||||
--tv-CalendarView-mark-digit-left: var(--tv-space-md, 8px);
|
||||
// 时间线样式
|
||||
--tv-CalendarView-timeline-margin-top: var(--tv-space-sm);
|
||||
--tv-CalendarView-timeline-li-border-width: var(--tv-border-width);
|
||||
--tv-CalendarView-timeline-span-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-timeline-span-text-color: var(--tv-color-text);
|
||||
--tv-CalendarView-timeline-margin-top: var(--tv-space-sm, 4px);
|
||||
--tv-CalendarView-timeline-li-border-width: var(--tv-border-width, 1px);
|
||||
--tv-CalendarView-timeline-span-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CalendarView-timeline-span-text-color: var(--tv-color-text, #191919);
|
||||
// 时间线 event-list样式
|
||||
--tv-CalendarView-events-list-height: 16px;
|
||||
--tv-CalendarView-events-list-padding: var(--tv-space-xs);
|
||||
--tv-CalendarView-events-list-padding: var(--tv-space-xs, 2px);
|
||||
// 周次模式样式
|
||||
--tv-CalendarView-week-li-padding-y: var(--tv-space-lg);
|
||||
--tv-CalendarView-week-li-padding-x: var(--tv-space-xl);
|
||||
--tv-CalendarView-week-li-padding-y: var(--tv-space-lg, 12px);
|
||||
--tv-CalendarView-week-li-padding-x: var(--tv-space-xl, 16px);
|
||||
// title样式
|
||||
--tv-CalendarView-week-title-font-size: var(--tv-font-size-default);
|
||||
--tv-CalendarView-week-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-CalendarView-week-content-font-size: var(--tv-font-size-sm);
|
||||
--tv-CalendarView-week-content-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-CalendarView-week-title-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CalendarView-week-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-CalendarView-week-content-font-size: var(--tv-font-size-sm, 12px);
|
||||
--tv-CalendarView-week-content-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// day-events样式
|
||||
--tv-CalendarView-week-day-font-size: var(--tv-font-size-sm);
|
||||
--tv-CalendarView-week-day-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-CalendarView-week-day-margin-bottom: var(--tv-space-md);
|
||||
--tv-CalendarView-week-day-font-size: var(--tv-font-size-sm, 12px);
|
||||
--tv-CalendarView-week-day-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
--tv-CalendarView-week-day-margin-bottom: var(--tv-space-md, 8px);
|
||||
// day-events内容样式
|
||||
--tv-CalendarView-week-date-padding-x: var(--tv-space-md);
|
||||
--tv-CalendarView-week-date-text-color: var(--tv-color-text-weaken);
|
||||
--tv-CalendarView-week-content-padding-x: var(--tv-space-md);
|
||||
--tv-CalendarView-week-date-padding-x: var(--tv-space-md, 8px);
|
||||
--tv-CalendarView-week-date-text-color: var(--tv-color-text-weaken, #808080);
|
||||
--tv-CalendarView-week-content-padding-x: var(--tv-space-md, 8px);
|
||||
// schedule间距圆角
|
||||
--tv-CalendarView-week-schedule-margin-top: var(--tv-space-md);
|
||||
--tv-CalendarView-week-schedule-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-CalendarView-week-schedule-icon-size: var(--tv-icon-size);
|
||||
--tv-CalendarView-schedule-span-margin-left: var(--tv-space-sm);
|
||||
--tv-CalendarView-week-schedule-margin-top: var(--tv-space-md, 8px);
|
||||
--tv-CalendarView-week-schedule-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
--tv-CalendarView-week-schedule-icon-size: var(--tv-icon-size, 16px);
|
||||
--tv-CalendarView-schedule-span-margin-left: var(--tv-space-sm, 4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,49 +12,49 @@
|
|||
|
||||
.inject-Calendar-vars() {
|
||||
// 日历背景颜色
|
||||
--tv-Calendar-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Calendar-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日历日期列表选中文字颜色
|
||||
--tv-Calendar-list-item-selected-text-color: var(--tv-color-text);
|
||||
--tv-Calendar-list-item-selected-text-color: var(--tv-color-text, #191919);
|
||||
// 日历日期常态颜色
|
||||
--tv-Calendar-text-color-primary: var(--tv-color-icon);
|
||||
--tv-Calendar-text-color-primary: var(--tv-color-icon, #808080);
|
||||
// 日历日期选中颜色
|
||||
--tv-Calendar-day-selected-text-color: var(--tv-color-text-active);
|
||||
--tv-Calendar-day-selected-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 日历日期悬浮颜色
|
||||
--tv-Calendar-hover-text-color: var(--tv-color-icon-hover);
|
||||
--tv-Calendar-hover-text-color: var(--tv-color-icon-hover, #191919);
|
||||
// 日历日期选中背景颜色
|
||||
--tv-Calendar-day-selected-bg: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-Calendar-day-selected-bg: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 日历日期悬浮背景颜色
|
||||
--tv-Calendar-day-hover-bg: var(--tv-color-bg-hover);
|
||||
--tv-Calendar-day-hover-bg: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 日历日期成功背景颜色
|
||||
--tv-Calendar-bg-color-success: var(--tv-color-success-bg);
|
||||
--tv-Calendar-bg-color-success: var(--tv-color-success-bg, #5cb300);
|
||||
// 日历日期警告背景颜色
|
||||
--tv-Calendar-bg-color-warning: var(--tv-color-warn-bg);
|
||||
--tv-Calendar-bg-color-warning: var(--tv-color-warn-bg, #ff8800);
|
||||
// 日历日期危险背景颜色
|
||||
--tv-Calendar-bg-color-danger: var(--tv-color-error-bg);
|
||||
--tv-Calendar-bg-color-danger: var(--tv-color-error-bg, #f23030);
|
||||
// 日历日期信息文字颜色
|
||||
--tv-Calendar-text-color-info: var(--tv-color-info-text-primary);
|
||||
--tv-Calendar-text-color-info: var(--tv-color-info-text-primary, #191919);
|
||||
// 日历表头文字字号
|
||||
--tv-Calendar-content-heard-font-size: var(--tv-font-size-default);
|
||||
--tv-Calendar-content-heard-font-size: var(--tv-font-size-default, 14px);
|
||||
// 日历表头输入框选项圆角
|
||||
--tv-Calendar-selected-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Calendar-selected-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 日历表头输入框圆角
|
||||
--tv-Calendar-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Calendar-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 日历表头输入框字号
|
||||
--tv-Calendar-input-font-size: var(--tv-font-size-default);
|
||||
--tv-Calendar-input-font-size: var(--tv-font-size-default, 14px);
|
||||
// 日历输入框hover边框色
|
||||
--tv-Calendar-input-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Calendar-input-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 日历列次悬浮背景色
|
||||
--tv-Calendar-list-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Calendar-list-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 日历列次悬选中景色
|
||||
--tv-Calendar-list-item-selected-bg-color: var(--tv-color-bg-active);
|
||||
--tv-Calendar-list-item-selected-bg-color: var(--tv-color-bg-active, #f5f5f5);
|
||||
// 日历日期禁用文字色
|
||||
--tv-Calendar-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Calendar-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 日历日期禁用信息背景色
|
||||
--tv-Calendar-disabled-info-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Calendar-disabled-info-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日历日期禁用成功背景色
|
||||
--tv-Calendar-disabled-success-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Calendar-disabled-success-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日历日期禁用警告背景色
|
||||
--tv-Calendar-disabled-warning-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Calendar-disabled-warning-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 日历日期禁用危险背景色
|
||||
--tv-Calendar-disabled-error-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Calendar-disabled-error-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.inject-CardTemplate-vars() {
|
||||
--tv-CardTemplate-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
--tv-CardTemplate-tool-icon-size: var(--tv-icon-size);
|
||||
--tv-CardTemplate-tool-icon-size: var(--tv-icon-size, 16px);
|
||||
--tv-CardTemplate-tool-icon-color: var(--tv-color-icon-control, #191919);
|
||||
--tv-CardTemplate-tool-hover-icon-color: #c2c2c2; // 无对应的正确变量
|
||||
--tv-CardTemplate-tool-active-icon-color: #595959;
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
--tv-CardTemplate-tool-selector-active-text-color: var(--tv-color-text-secondary, #595959);
|
||||
--tv-CardTemplate-tool-selector-active-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
--tv-CardTemplate-header-height: 46px;
|
||||
--tv-CardTemplate-header-font-size: var(--tv-font-size-lg);
|
||||
--tv-CardTemplate-header-font-size: var(--tv-font-size-lg, 16px);
|
||||
--tv-CardTemplate-header-border-color: #999999;
|
||||
--tv-CardTemplate-header-title-font-weight: var(--tv-font-weight-bold, bold);
|
||||
--tv-CardTemplate-header-title-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CardTemplate-header-title-text-color: var(--tv-color-text, #191919);
|
||||
--tv-CardTemplate-more-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-CardTemplate-more-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.inject-Card-vars() {
|
||||
// 卡片背景色
|
||||
--tv-Card-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-Card-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
|
||||
// 大尺寸卡片的宽度
|
||||
--tv-Card-large-width: calc(var(--tv-size-base, 4px) * 144);
|
||||
|
|
@ -24,28 +24,28 @@
|
|||
--tv-Card-mini-width: calc(var(--tv-size-base, 4px) * 54);
|
||||
|
||||
// 大尺寸卡片的圆角
|
||||
--tv-Card-large-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Card-large-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 中尺寸卡片的圆角
|
||||
--tv-Card-medium-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Card-medium-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 小尺寸卡片的圆角
|
||||
--tv-Card-small-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Card-small-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 迷你尺寸卡片的圆角
|
||||
--tv-Card-mini-border-radius: var(--tv-border-radius-xs);
|
||||
--tv-Card-mini-border-radius: var(--tv-border-radius-xs, 2px);
|
||||
|
||||
// 成功状态的卡片的边框颜色
|
||||
--tv-Card-success-border-color: var(--tv-color-act-success-border);
|
||||
--tv-Card-success-border-color: var(--tv-color-act-success-border, #5cb300);
|
||||
// 警告状态的卡片的边框颜色
|
||||
--tv-Card-warning-border-color: var(--tv-color-act-warning-border);
|
||||
--tv-Card-warning-border-color: var(--tv-color-act-warning-border, #ff8800);
|
||||
// 报警状态的卡片的边框颜色
|
||||
--tv-Card-alerting-border-color: #fac20a;
|
||||
// 危险状态的卡片的边框颜色
|
||||
--tv-Card-danger-border-color: var(--tv-color-act-danger-border);
|
||||
--tv-Card-danger-border-color: var(--tv-color-act-danger-border, #f23030);
|
||||
// 默认状态的卡片的边框颜色
|
||||
--tv-Card-default-border-color: var(--tv-color-border-container);
|
||||
--tv-Card-default-border-color: var(--tv-color-border-container, #f0f0f0);
|
||||
// 选中状态的卡片的边框颜色
|
||||
--tv-Card-checked-border-color: var(--tv-color-border-active-control);
|
||||
--tv-Card-checked-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
// 禁用状态的卡片的背景颜色
|
||||
--tv-Card-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Card-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
|
||||
// 大尺寸卡片的logo状态下，body区域的padding值
|
||||
--tv-Card-large-body-padding: 32px;
|
||||
|
|
@ -57,26 +57,26 @@
|
|||
--tv-Card-mini-body-padding: var(--tv-space-lg, 12px);
|
||||
|
||||
// 卡片的标题的字体大小
|
||||
--tv-Card-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-Card-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 卡片的标题的字体颜色
|
||||
--tv-Card-title-text-color: var(--tv-color-text);
|
||||
--tv-Card-title-text-color: var(--tv-color-text, #191919);
|
||||
// 卡片的标题的字重
|
||||
--tv-Card-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Card-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 卡片的正文的字体大小
|
||||
--tv-Card-main-font-size: var(--tv-font-size-default);
|
||||
--tv-Card-main-font-size: var(--tv-font-size-default, 14px);
|
||||
// 卡片的正文的字体颜色
|
||||
--tv-Card-main-text-color: var(--tv-color-text-weaken);
|
||||
--tv-Card-main-text-color: var(--tv-color-text-weaken, #808080);
|
||||
|
||||
// 卡片的选项的文本色
|
||||
--tv-Card-option-text-color: var(--tv-color-bg-primary);
|
||||
--tv-Card-option-text-color: var(--tv-color-bg-primary, #191919);
|
||||
// 卡片的选项的文本大小
|
||||
--tv-Card-option-font-size: var(--tv-font-size-lg);
|
||||
--tv-Card-option-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 卡片的选项的文本大小
|
||||
--tv-Card-option-top-border-color: var(--tv-color-bg-header);
|
||||
--tv-Card-option-top-border-color: var(--tv-color-bg-header, #f5f5f5);
|
||||
// 卡片的选项禁用时的文本色
|
||||
--tv-Card-option-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Card-option-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 卡片的'更多'的字体颜色
|
||||
--tv-Card-footer-more-text-color: var(--tv-color-act-primary-text);
|
||||
--tv-Card-footer-more-text-color: var(--tv-color-act-primary-text, #191919);
|
||||
// 卡片标题下边距
|
||||
--tv-Card-title-mg-bottom: var(--tv-space-xl);
|
||||
--tv-Card-title-mg-bottom: var(--tv-space-xl, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
*/
|
||||
|
||||
.inject-CarouselItem-vars() {
|
||||
--tv-CarouselItem-title-height: var(--tv-size-height-lg);
|
||||
--tv-CarouselItem-title-text-color: var(--tv-color-text-weaken);
|
||||
--tv-CarouselItem-title-bg-color: var(--tv-color-bg-primary);
|
||||
--tv-CarouselItem-title-span-font-size: var(--tv-font-size-default);
|
||||
--tv-CarouselItem-mask-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-CarouselItem-title-height: var(--tv-size-height-lg, 40px);
|
||||
--tv-CarouselItem-title-text-color: var(--tv-color-text-weaken, #808080);
|
||||
--tv-CarouselItem-title-bg-color: var(--tv-color-bg-primary, #191919);
|
||||
--tv-CarouselItem-title-span-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-CarouselItem-mask-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,45 +16,45 @@
|
|||
// 箭头按钮背景宽度
|
||||
--tv-Carousel-arrow-width: 32px;
|
||||
// 左右箭头的字号
|
||||
--tv-Carousel-arrow-font-size: var(--tv-font-size-lg);
|
||||
--tv-Carousel-arrow-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 左右箭头按钮悬浮背景色
|
||||
--tv-Carousel-arrow-hover-bg-color: var(--tv-color-bg-hover-2);
|
||||
--tv-Carousel-arrow-hover-bg-color: var(--tv-color-bg-hover-2, #e6e6e6);
|
||||
// 左右箭头按钮背景色
|
||||
--tv-Carousel-arrow-bg-color: var(--tv-color-bg-header);
|
||||
--tv-Carousel-arrow-bg-color: var(--tv-color-bg-header, #f5f5f5);
|
||||
// 箭头正常颜色
|
||||
--tv-Carousel-arrow-svg-color: var(--tv-color-icon);
|
||||
--tv-Carousel-arrow-svg-color: var(--tv-color-icon, #808080);
|
||||
// 指示器盒子的圆角大小
|
||||
--tv-Carousel-indicators-border-radius: 13px;
|
||||
// 指示器盒子的高度
|
||||
--tv-Carousel-indicators-height: 8px;
|
||||
// 幻灯片内的当前指示器图标色
|
||||
--tv-Carousel-indicator-active-text-color: var(--tv-color-icon);
|
||||
--tv-Carousel-indicator-active-text-color: var(--tv-color-icon, #808080);
|
||||
// 幻灯片内的悬浮指示器图标色
|
||||
--tv-Carousel-indicator-hover-text-color: var(--tv-color-icon-hover);
|
||||
--tv-Carousel-indicator-hover-text-color: var(--tv-color-icon-hover, #191919);
|
||||
// 非当前指示器背景色
|
||||
--tv-Carousel-indicator-button-bg-color: var(--tv-color-bg-5);
|
||||
--tv-Carousel-indicator-button-bg-color: var(--tv-color-bg-5, #e6e6e6);
|
||||
// 当前指示器右边距
|
||||
--tv-Carousel-indicator-active-width: 12px;
|
||||
// 当前指示器背景色
|
||||
--tv-Carousel-indicator-active-background-color: var(--tv-color-bg-5-active);
|
||||
--tv-Carousel-indicator-active-background-color: var(--tv-color-bg-5-active, #595959);
|
||||
// 当前指示器的宽度
|
||||
--tv-Carousel-indicator-active-button-width: 12px;
|
||||
// 当前指示器圆角
|
||||
--tv-Carousel-indicator-active-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Carousel-indicator-active-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 幻灯片外的指示器默认背景色
|
||||
--tv-Carousel-outside-button-bg-color: var(--tv-color-bg-5);
|
||||
--tv-Carousel-outside-button-bg-color: var(--tv-color-bg-5, #e6e6e6);
|
||||
// 幻灯片外的当前指示器背景色
|
||||
--tv-Carousel-outside-button-active-bg-color: var(--tv-color-bg-5-active);
|
||||
--tv-Carousel-outside-button-active-bg-color: var(--tv-color-bg-5-active, #595959);
|
||||
// 标签按钮的字号
|
||||
--tv-Carousel-labels-button-font-size: var(--tv-font-size-default);
|
||||
--tv-Carousel-labels-button-font-size: var(--tv-font-size-default, 14px);
|
||||
// 箭头悬浮文本颜色
|
||||
--tv-Carousel-arrow-hover-text-color: var(--tv-color-icon-hover);
|
||||
--tv-Carousel-arrow-hover-text-color: var(--tv-color-icon-hover, #191919);
|
||||
// 左侧箭头背景色
|
||||
--tv-Carousel-arrow-left-bg-color: var(--tv-color-bg);
|
||||
--tv-Carousel-arrow-left-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 右侧箭头背景色
|
||||
--tv-Carousel-arrow-right-bg-color: var(--tv-color-bg);
|
||||
--tv-Carousel-arrow-right-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 按钮禁用色
|
||||
--tv-Carousel-arrow-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Carousel-arrow-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 按钮禁用色
|
||||
--tv-Carousel-arrow-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Carousel-arrow-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
// 下拉菜单文本色
|
||||
--tv-CascaderMenu-text-color: var(--tv-color-text, #191919);
|
||||
// 下拉菜单边框色
|
||||
--tv-CascaderMenu-border-color: var(--tv-color-border-divider);
|
||||
--tv-CascaderMenu-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 下拉菜单为空时的文本色
|
||||
--tv-CascaderMenu-empty-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 下拉菜单列表垂直方向的内边距
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
// 输入框图标字体大小
|
||||
--tv-Cascader-input-icon-font-size: 10px; // 无对应变量
|
||||
// 下拉菜单边框色
|
||||
--tv-Cascader-border-color: var(--tv-color-border-divider);
|
||||
--tv-Cascader-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 悬浮时显示的边框色
|
||||
--tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 聚焦时显示的边框色
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
// 输入框标签的icon图标悬浮时显示的背景色
|
||||
--tv-Cascader-tag-icon-hover-bg-color: var(--tv-color-icon, #808080);
|
||||
// 下拉列表的文本色（没有生效）
|
||||
--tv-Cascader-list-text-color: var(--tv-color-text);
|
||||
--tv-Cascader-list-text-color: var(--tv-color-text, #191919);
|
||||
// 下拉列表子项的高度（没有生效）
|
||||
--tv-Cascader-item-height: 32px;
|
||||
// 下拉列表子项悬浮时的背景色（没有生效）
|
||||
--tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 搜索后下拉列表无匹配数据的文本色
|
||||
--tv-Cascader-empty-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Cascader-empty-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 搜索框的文本色（没有生效）
|
||||
--tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
|
||||
// 搜索框的占位符的文本色（没有生效）
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
*/
|
||||
|
||||
.inject-ChartCore-vars() {
|
||||
--tv-ChartCore-data-empty-text-color: var(--tv-color-text-weaken);
|
||||
--tv-ChartCore-data-empty-font-size: var(--tv-font-size-default);
|
||||
--tv-ChartCore-data-empty-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-ChartCore-data-empty-text-color: var(--tv-color-text-weaken, #808080);
|
||||
--tv-ChartCore-data-empty-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-ChartCore-data-empty-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,41 +12,41 @@
|
|||
|
||||
.inject-CheckboxButton-vars() {
|
||||
// 按钮形式复选框背景色
|
||||
--tv-CheckboxButton-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-CheckboxButton-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 按钮形式复选框字号
|
||||
--tv-CheckboxButton-font-size: var(--tv-font-size-default);
|
||||
--tv-CheckboxButton-font-size: var(--tv-font-size-default, 14px);
|
||||
// 按钮形式复选框未选中项悬浮文本色
|
||||
--tv-CheckboxButton-hover-text-color: var(--tv-color-text-active);
|
||||
--tv-CheckboxButton-hover-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 按钮形式选中项边框色
|
||||
--tv-CheckboxButton-checked-border-color: var(--tv-color-border-active-control);
|
||||
--tv-CheckboxButton-checked-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
// 按钮形式复选框禁用文本色
|
||||
--tv-CheckboxButton-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-CheckboxButton-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 按钮形式复选框禁用背景色
|
||||
--tv-CheckboxButton-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-CheckboxButton-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 按钮形式复选框未选中项文本色
|
||||
--tv-CheckboxButton-text-color: var(--tv-color-text);
|
||||
--tv-CheckboxButton-text-color: var(--tv-color-text, #191919);
|
||||
// 按钮形式复选框选中项文本色
|
||||
--tv-CheckboxButton-checked-text-color: var(--tv-color-text-active);
|
||||
--tv-CheckboxButton-checked-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 按钮形式复选框边框色
|
||||
--tv-CheckboxButton-border-color: var(--tv-color-border);
|
||||
--tv-CheckboxButton-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 按钮形式复选框悬浮默认边框色
|
||||
--tv-CheckboxButton-border-color-hover: var(--tv-color-border-active-control);
|
||||
--tv-CheckboxButton-border-color-hover: var(--tv-color-border-active-control, #1476ff);
|
||||
// 按钮组按钮圆角
|
||||
--tv-CheckboxButton-border-radius: var(--tv-border-radius-md);
|
||||
--tv-CheckboxButton-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 按钮组禁用边框色
|
||||
--tv-CheckboxButton-disabled-border-color: var(--tv-color-border-disabled);
|
||||
--tv-CheckboxButton-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 按钮组小按钮字号
|
||||
--tv-CheckboxButton-size-mini-font-size: var(--tv-font-size-sm);
|
||||
--tv-CheckboxButton-size-mini-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 按钮组小按钮圆角
|
||||
--tv-CheckboxButton-size-mini-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-CheckboxButton-size-mini-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 按钮组small按钮高度
|
||||
--tv-CheckboxButton-size-small-height: var(--tv-size-height-sm);
|
||||
--tv-CheckboxButton-size-small-height: var(--tv-size-height-sm, 28px);
|
||||
// 按钮组mini按钮高度
|
||||
--tv-CheckboxButton-size-mini-height: var(--tv-size-height-xs);
|
||||
--tv-CheckboxButton-size-mini-height: var(--tv-size-height-xs, 24px);
|
||||
// 按钮组medium按钮高度
|
||||
--tv-CheckboxButton-size-medium-height: var(--tv-size-height-lg);
|
||||
--tv-CheckboxButton-size-medium-height: var(--tv-size-height-lg, 40px);
|
||||
// 按钮组small按钮字体
|
||||
--tv-CheckboxButton-small-font-size: var(--tv-font-size-sm);
|
||||
--tv-CheckboxButton-small-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 按钮组按钮上边距
|
||||
--tv-CheckboxButton-margin-top: var(--tv-space-md);
|
||||
--tv-CheckboxButton-margin-top: var(--tv-space-md, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,39 +12,39 @@
|
|||
|
||||
.inject-Checkbox-vars() {
|
||||
// 复选框内部svg尺寸
|
||||
--tv-Checkbox-icon-size: var(--tv-icon-size);
|
||||
--tv-Checkbox-icon-size: var(--tv-icon-size, 16px);
|
||||
// 默认复选框未选中禁用背景色
|
||||
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Checkbox-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 默认复选框文本色
|
||||
--tv-Checkbox-text-color: var(--tv-color-text);
|
||||
--tv-Checkbox-text-color: var(--tv-color-text, #191919);
|
||||
// 默认复选框字号
|
||||
--tv-Checkbox-font-size: var(--tv-font-size-default);
|
||||
--tv-Checkbox-font-size: var(--tv-font-size-default, 14px);
|
||||
// 默认复选框字重
|
||||
--tv-Checkbox-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Checkbox-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 默认复选框未选中项边框色
|
||||
--tv-Checkbox-border-color: var(--tv-color-border);
|
||||
--tv-Checkbox-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 默认复选框禁用时，label文本色
|
||||
--tv-Checkbox-label-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Checkbox-label-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 默认复选框边框圆角
|
||||
--tv-Checkbox-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Checkbox-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 默认复选框外边框圆角
|
||||
--tv-Checkbox-outline-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Checkbox-outline-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 默认复选框的右侧外边距
|
||||
--tv-Checkbox-label-margin-right: 24px;
|
||||
// 边框模式复选框禁用边框色
|
||||
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Checkbox-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 复选框过滤器模式底色
|
||||
--tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2);
|
||||
--tv-Checkbox-bg-color-filter: var(--tv-color-bg-gray-2, #e6e6e6);
|
||||
// 复选框全选半选选中背景色
|
||||
--tv-Checkbox-bg-color-active: var(--tv-color-bg-active-control);
|
||||
--tv-Checkbox-bg-color-active: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 复选框全选半选选中边框色
|
||||
--tv-Checkbox-border-color-inverse: var(--tv-color-text-inverse);
|
||||
--tv-Checkbox-border-color-inverse: var(--tv-color-text-inverse, #ffffff);
|
||||
// 复选框未选边框色
|
||||
--tv-Checkbox-unchecked-border-color: var(--tv-color-border);
|
||||
--tv-Checkbox-unchecked-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 复选框未选边框hover色
|
||||
--tv-Checkbox-unchecked-border-color-hover: var(--tv-color-border-active);
|
||||
--tv-Checkbox-unchecked-border-color-hover: var(--tv-color-border-active, #191919);
|
||||
// 复选框选中禁用背景色
|
||||
--tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled);
|
||||
--tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled, #dbdbdb);
|
||||
// 复选框选中禁用边框色
|
||||
--tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive);
|
||||
--tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.inject-CollapseItem-vars() {
|
||||
// 面板默认文本色
|
||||
--tv-CollapseItem-text-color: var(--tv-color-text);
|
||||
--tv-CollapseItem-text-color: var(--tv-color-text, #191919);
|
||||
// 面板背景色
|
||||
--tv-CollapseItem-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-CollapseItem-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
// 面板头部向下箭头图标色
|
||||
--tv-CollapseItem-icon-color: var(--tv-color-icon);
|
||||
--tv-CollapseItem-icon-color: var(--tv-color-icon, #808080);
|
||||
// 面板禁用文本色
|
||||
--tv-CollapseItem-disabled-text-color: var(--tv-color-icon-disabled);
|
||||
--tv-CollapseItem-disabled-text-color: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 面板头部背景色
|
||||
--tv-CollapseItem-header-bg-color: var(--tv-color-bg-3);
|
||||
--tv-CollapseItem-header-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 面板头部禁用背景色
|
||||
--tv-CollapseItem-disabled-header-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-CollapseItem-disabled-header-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 面板头部字号
|
||||
--tv-CollapseItem-header-font-size: var(--tv-font-size-default);
|
||||
--tv-CollapseItem-header-font-size: var(--tv-font-size-default, 14px);
|
||||
// 面板头部向上箭头图标色|箭头悬浮色
|
||||
--tv-CollapseItem-arrow-hover-text-color: var(--tv-color-icon-hover);
|
||||
--tv-CollapseItem-arrow-hover-text-color: var(--tv-color-icon-hover, #191919);
|
||||
// 面板头部箭头尺寸
|
||||
--tv-CollapseItem-icon-size: var(--tv-icon-size);
|
||||
--tv-CollapseItem-icon-size: var(--tv-icon-size, 16px);
|
||||
// 面板头部边框色
|
||||
--tv-CollapseItem-header-border-color: var(--tv-color-border-divider);
|
||||
--tv-CollapseItem-header-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 面板内容字号
|
||||
--tv-CollapseItem-content-font-size: var(--tv-font-size-default);
|
||||
--tv-CollapseItem-content-font-size: var(--tv-font-size-default, 14px);
|
||||
// 面板右侧标题颜色
|
||||
--tv-CollapseItem-title-right-text-color: var(--tv-color-text-link);
|
||||
--tv-CollapseItem-title-right-text-color: var(--tv-color-text-link, #1476ff);
|
||||
// 面板右侧图标颜色
|
||||
--tv-CollapseItem-title-right-icon-color: var(--tv-color-icon-link);
|
||||
--tv-CollapseItem-title-right-icon-color: var(--tv-color-icon-link, #1476ff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
*/
|
||||
|
||||
.inject-Collapse-vars() {
|
||||
--tv-Collapse-divider-line-color: var(--tv-color-border-divider);
|
||||
--tv-Collapse-divider-line-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
.inject-ColorPicker-vars() {
|
||||
// 按钮边框色
|
||||
--tv-ColorPicker-border-color: var(--tv-color-border-ghost);
|
||||
--tv-ColorPicker-border-color: var(--tv-color-border-ghost, #808080);
|
||||
// 按钮边框圆角
|
||||
--tv-ColorPicker-border-radius-md: var(--tv-border-radius-md);
|
||||
--tv-ColorPicker-border-radius-md: var(--tv-border-radius-md, 6px);
|
||||
// 按钮边框小圆角
|
||||
--tv-ColorPicker-border-radius-xs: var(--tv-border-radius-xs);
|
||||
--tv-ColorPicker-border-radius-xs: var(--tv-border-radius-xs, 2px);
|
||||
// 按钮垂直内边距
|
||||
--tv-ColorPicker-padding-y: var(--tv-space-sm);
|
||||
--tv-ColorPicker-padding-y: var(--tv-space-sm, 4px);
|
||||
// 按钮水平内边距
|
||||
--tv-ColorPicker-padding-x: var(--tv-space-sm);
|
||||
--tv-ColorPicker-padding-x: var(--tv-space-sm, 4px);
|
||||
|
||||
// 超大尺寸高度
|
||||
--tv-ColorPicker-size-large-height: var(--tv-size-height-xl);
|
||||
--tv-ColorPicker-size-large-height: var(--tv-size-height-xl, 48px);
|
||||
// 超大尺寸宽度
|
||||
--tv-ColorPicker-size-large-width: var(--tv-size-height-xl);
|
||||
--tv-ColorPicker-size-large-width: var(--tv-size-height-xl, 48px);
|
||||
|
||||
// 中等尺寸高度
|
||||
--tv-ColorPicker-size-medium-height: var(--tv-size-height-lg);
|
||||
--tv-ColorPicker-size-medium-height: var(--tv-size-height-lg, 40px);
|
||||
// 中等尺寸最小宽度
|
||||
--tv-ColorPicker-size-medium-width: var(--tv-size-height-lg);
|
||||
--tv-ColorPicker-size-medium-width: var(--tv-size-height-lg, 40px);
|
||||
|
||||
// 小型高度
|
||||
--tv-ColorPicker-size-small-height: var(--tv-size-height-sm);
|
||||
--tv-ColorPicker-size-small-height: var(--tv-size-height-sm, 28px);
|
||||
// 小尺寸宽度
|
||||
--tv-ColorPicker-size-small-width: var(--tv-size-height-sm);
|
||||
--tv-ColorPicker-size-small-width: var(--tv-size-height-sm, 28px);
|
||||
|
||||
// 迷你尺寸按钮高度
|
||||
--tv-ColorPicker-size-mini-height: var(--tv-size-height-xs);
|
||||
--tv-ColorPicker-size-mini-height: var(--tv-size-height-xs, 24px);
|
||||
// 迷你尺寸宽度
|
||||
--tv-ColorPicker-size-mini-width: var(--tv-size-height-xs);
|
||||
--tv-ColorPicker-size-mini-width: var(--tv-size-height-xs, 24px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
.inject-ColorSelectPanel-vars() {
|
||||
// 弹出框右侧色调框圆角
|
||||
--tv-ColorSelectPanel-border-radius-lg: var(--tv-border-radius-lg);
|
||||
--tv-ColorSelectPanel-border-radius-lg: var(--tv-border-radius-lg, 8px);
|
||||
// 面板圆角
|
||||
--tv-ColorSelectPanel-border-radius-md: var(--tv-border-radius-md);
|
||||
--tv-ColorSelectPanel-border-radius-md: var(--tv-border-radius-md, 6px);
|
||||
// 历史记录展开框颜色块圆角
|
||||
--tv-ColorSelectPanel-border-radius-sm: var(--tv-border-radius-sm);
|
||||
--tv-ColorSelectPanel-border-radius-sm: var(--tv-border-radius-sm, 4px);
|
||||
// 弹出框垂直内边距
|
||||
--tv-ColorSelectPanel-padding-y: var(--tv-space-md);
|
||||
--tv-ColorSelectPanel-padding-y: var(--tv-space-md, 8px);
|
||||
// 弹出框水平内边距
|
||||
--tv-ColorSelectPanel-padding-x: var(--tv-space-md);
|
||||
--tv-ColorSelectPanel-padding-x: var(--tv-space-md, 8px);
|
||||
// alpha选择条上外边距
|
||||
--tv-ColorSelectPanel-alpha-margin-top: var(--tv-space-md);
|
||||
--tv-ColorSelectPanel-alpha-margin-top: var(--tv-space-md, 8px);
|
||||
// 弹出框阴影
|
||||
--tv-ColorSelectPanel-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-ColorSelectPanel-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 弹出框背景色
|
||||
--tv-ColorSelectPanel-bg-color: var(--tv-color-bg-3);
|
||||
--tv-ColorSelectPanel-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 颜色工具栏高度
|
||||
--tv-ColorSelectPanel-tools-line-height: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
|
||||
.inject-Crop-vars() {
|
||||
// 弹窗蒙层的背景色，实际为该值的0.5的透明度
|
||||
--tv-Crop-modal-bg-color: var(--tv-color-bg-mask);
|
||||
--tv-Crop-modal-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// 设置裁剪框在图片正中心加号背景色
|
||||
--tv-Crop-center-bg-color: var(--tv-color-bg-control-unactive);
|
||||
--tv-Crop-center-bg-color: var(--tv-color-bg-control-unactive, #c2c2c2);
|
||||
// 弹窗裁剪框的背景色，实际为该值的0.1透明度
|
||||
--tv-Crop-face-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Crop-face-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 条框选择背景颜色
|
||||
--tv-Crop-select-bg-color: var(--tv-color-bg);
|
||||
--tv-Crop-select-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 条框字体颜色
|
||||
--tv-Crop-select-icon-color: var(--tv-color-icon);
|
||||
--tv-Crop-select-icon-color: var(--tv-color-icon, #808080);
|
||||
// 条框悬浮颜色
|
||||
--tv-Crop-select-icon-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Crop-select-icon-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 条框的阴影
|
||||
--tv-Crop-select-box-shadow-color: var(--tv-shadow-2-down);
|
||||
--tv-Crop-select-box-shadow-color: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 条框的分割线颜色
|
||||
--tv-Crop-select-box-split-bg-color: var(--tv-color-border-divider-short);
|
||||
--tv-Crop-select-box-split-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
*/
|
||||
|
||||
.inject-Dept-vars() {
|
||||
--tv-Dept-label-font-size: var(--tv-font-size-default);
|
||||
--tv-Dept-label-text-color: var(--tv-color-text);
|
||||
--tv-Dept-label-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Dept-selected-info-text-color: var(--tv-color-text);
|
||||
--tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
|
||||
--tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Dept-label-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-Dept-label-text-color: var(--tv-color-text, #191919);
|
||||
--tv-Dept-label-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-Dept-selected-info-text-color: var(--tv-color-text, #191919);
|
||||
--tv-Dept-selected-info-bg-color: var(--tv-color-bg-active, #f5f5f5);
|
||||
--tv-Dept-selected-info-border-radius: var(--tv-border-radius-md, 6px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,48 +12,48 @@
|
|||
|
||||
.inject-DialogBox-vars() {
|
||||
// 对话框背景色
|
||||
--tv-DialogBox-bg-color: var(--tv-color-bg-3);
|
||||
--tv-DialogBox-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 对话框圆角
|
||||
--tv-DialogBox-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-DialogBox-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 对话框阴影
|
||||
--tv-DialogBox-shadow: var(--tv-shadow-4-down);
|
||||
--tv-DialogBox-shadow: var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));
|
||||
// 弹窗容器与内容间距
|
||||
--tv-DialogBox-padding: var(--tv-space-xxxl);
|
||||
--tv-DialogBox-padding: var(--tv-space-xxxl, 32px);
|
||||
// 头部字号
|
||||
--tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md);
|
||||
--tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md, 20px);
|
||||
// 头部字重
|
||||
--tv-DialogBox-head-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-DialogBox-head-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 头部文本色
|
||||
--tv-DialogBox-head-title-text-color: var(--tv-color-text);
|
||||
--tv-DialogBox-head-title-text-color: var(--tv-color-text, #191919);
|
||||
|
||||
// 关闭按钮高度
|
||||
--tv-DialogBox-btn-height: 32px;
|
||||
// 关闭按钮图标尺寸
|
||||
--tv-DialogBox-close-icon-size: 24px;
|
||||
// 关闭按钮图标色
|
||||
--tv-DialogBox-close-icon-color: var(--tv-color-icon);
|
||||
--tv-DialogBox-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 关闭按钮悬浮图标色
|
||||
--tv-DialogBox-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-DialogBox-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
|
||||
// 内容字号
|
||||
--tv-DialogBox-body-font-size: var(--tv-font-size-default);
|
||||
--tv-DialogBox-body-font-size: var(--tv-font-size-default, 14px);
|
||||
// 内容字体色
|
||||
--tv-DialogBox-body-text-color: var(--tv-color-text-secondary);
|
||||
--tv-DialogBox-body-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 右侧弹窗内容字体色
|
||||
--tv-DialogBox-drawer-body-color: var(--tv-color-text);
|
||||
--tv-DialogBox-drawer-body-color: var(--tv-color-text, #191919);
|
||||
|
||||
// 抽屉最小宽度
|
||||
--tv-DialogBox-drawer-min-width: 500px;
|
||||
// 抽屉最大宽度
|
||||
--tv-DialogBox-drawer-max-width: 1000px;
|
||||
// 抽屉内容与底部边框颜色
|
||||
--tv-DialogBox-drawer-divider-border-color: var(--tv-color-border-divider);
|
||||
--tv-DialogBox-drawer-divider-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 缩放按钮
|
||||
--tv-DialogBox-resize-icon-color: var(--tv-color-icon);
|
||||
--tv-DialogBox-resize-icon-color: var(--tv-color-icon, #808080);
|
||||
// 缩放按钮悬浮状态
|
||||
--tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 缩放按钮大小
|
||||
--tv-DialogBox-resize-icon-size: var(--tv-icon-size);
|
||||
--tv-DialogBox-resize-icon-size: var(--tv-icon-size, 16px);
|
||||
// 弹窗容器与上下内容间距
|
||||
--tv-DialogBox-vertical-padding: var(--tv-space-xs);
|
||||
--tv-DialogBox-vertical-padding: var(--tv-space-xs, 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
.inject-Divider-vars() {
|
||||
// 分割线颜色
|
||||
--tv-Divider-dividing-line: var(--tv-color-border-divider-short);
|
||||
--tv-Divider-dividing-line: var(--tv-color-border-divider-short, #dbdbdb);
|
||||
// 文案背景色
|
||||
--tv-Divider-text-bg-color: var(--tv-color-border-divider);
|
||||
--tv-Divider-text-bg-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 文案文本色
|
||||
--tv-Divider-text-color: var(--tv-color-text);
|
||||
--tv-Divider-text-color: var(--tv-color-text, #191919);
|
||||
// 成功颜色
|
||||
--tv-Divider-success-color: var(--tv-color-success-border);
|
||||
--tv-Divider-success-color: var(--tv-color-success-border, #5cb300);
|
||||
// 默认颜色
|
||||
--tv-Divider-default-color: var(--tv-color-border-divider-short);
|
||||
--tv-Divider-default-color: var(--tv-color-border-divider-short, #dbdbdb);
|
||||
// 告警颜色
|
||||
--tv-Divider-warning-color: var(--tv-color-warn-border);
|
||||
--tv-Divider-warning-color: var(--tv-color-warn-border, #ff8800);
|
||||
// 信息颜色
|
||||
--tv-Divider-info-color: var(--tv-color-info-border);
|
||||
--tv-Divider-info-color: var(--tv-color-info-border, #1476ff);
|
||||
// 错误颜色
|
||||
--tv-Divider-error-color: var(--tv-color-error-border);
|
||||
--tv-Divider-error-color: var(--tv-color-error-border, #f23030);
|
||||
// 宽度
|
||||
--tv-Divider-border-width: var(--tv-border-width);
|
||||
--tv-Divider-border-width: var(--tv-border-width, 1px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,29 +16,29 @@
|
|||
// 最大宽度
|
||||
--tv-Drawer-max-width: 1000px;
|
||||
// 背景色
|
||||
--tv-Drawer-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Drawer-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 抽屉容器与内容间距
|
||||
--tv-Drawer-padding: var(--tv-space-xxxl);
|
||||
--tv-Drawer-padding: var(--tv-space-xxxl, 32px);
|
||||
// 内容底部边框色
|
||||
--tv-Drawer-divider-body-border-color: var(--tv-color-border-divider);
|
||||
--tv-Drawer-divider-body-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 抽屉组件圆角
|
||||
--tv-Drawer-border-radius-size: var(--tv-border-radius-sm);
|
||||
--tv-Drawer-border-radius-size: var(--tv-border-radius-sm, 4px);
|
||||
// 遮罩层背景色
|
||||
--tv-Drawer-mask-bg-color: var(--tv-color-bg-mask);
|
||||
--tv-Drawer-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// 阴影
|
||||
--tv-Drawer-shadow: var(--tv-shadow-4-left);
|
||||
--tv-Drawer-shadow: var(--tv-shadow-4-left, -8px 0 24px 0 rgba(0, 0, 0, 0.16));
|
||||
// 头部字号
|
||||
--tv-Drawer-head-title-font-size: var(--tv-font-size-heading-md);
|
||||
--tv-Drawer-head-title-font-size: var(--tv-font-size-heading-md, 20px);
|
||||
// 头部标题字重
|
||||
--tv-Drawer-head-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Drawer-head-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 头部标题字体色
|
||||
--tv-Drawer-head-title-text-color: var(--tv-color-text);
|
||||
--tv-Drawer-head-title-text-color: var(--tv-color-text, #191919);
|
||||
// 关闭按钮图标色
|
||||
--tv-Drawer-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Drawer-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 关闭按钮悬浮图标色
|
||||
--tv-Drawer-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Drawer-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 帮助图标宽高
|
||||
--tv-Drawer-help-icon-width-height: var(--tv-icon-size);
|
||||
--tv-Drawer-help-icon-width-height: var(--tv-icon-size, 16px);
|
||||
// 帮助图标色
|
||||
--tv-Drawer-help-icon-color: var(--tv-color-icon-control);
|
||||
--tv-Drawer-help-icon-color: var(--tv-color-icon-control, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
|
||||
.inject-DropTimes-vars() {
|
||||
// 时间选择选项字号
|
||||
--tv-DropTimes-item-font-size: var(--tv-font-size-default);
|
||||
--tv-DropTimes-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 时间选择选项左右内边距
|
||||
--tv-DropTimes-item-padding: 0 var(--tv-space-xl);
|
||||
--tv-DropTimes-item-padding: 0 var(--tv-space-xl, 16px);
|
||||
// 时间选择选项字体字重
|
||||
--tv-DropTimes-item-selected-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-DropTimes-item-selected-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 时间选择选项字体色(选中项)
|
||||
--tv-DropTimes-item-selected-color: var(--tv-color-text-active);
|
||||
--tv-DropTimes-item-selected-color: var(--tv-color-text-active, #1476ff);
|
||||
// 时间选择选项悬浮背景色(选中项)
|
||||
--tv-DropTimes-item-select-hover-bg-color: var(--tv-color-bg);
|
||||
--tv-DropTimes-item-select-hover-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 时间选择选项悬浮背景色
|
||||
--tv-DropTimes-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-DropTimes-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.inject-DropdownMenu-vars() {
|
||||
// 下拉菜单弹框的阴影
|
||||
--tv-DropdownMenu-box-shadow: var(--tv-shadow-3-down);
|
||||
--tv-DropdownMenu-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
|
||||
// 下拉菜单弹框的背景色
|
||||
--tv-DropdownMenu-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 下拉菜单弹框的圆角
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
|
||||
.inject-Espace-vars() {
|
||||
--tv-Espace-font-size: 26px;
|
||||
--tv-Espace-icon-color: var(--tv-color-icon);
|
||||
--tv-Espace-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Espace-icon-color: var(--tv-color-icon, #808080);
|
||||
--tv-Espace-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,41 +12,41 @@
|
|||
|
||||
.inject-FallMenu-vars() {
|
||||
// 菜单列表高度
|
||||
--tv-FallMenu-menu-height: var(--tv-size-height-xl);
|
||||
--tv-FallMenu-menu-height: var(--tv-size-height-xl, 48px);
|
||||
// 菜单背景色
|
||||
--tv-FallMenu-bg-color-normal: var(--tv-color-bg-secondary);
|
||||
--tv-FallMenu-bg-color-normal: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 菜单项悬浮背景色
|
||||
--tv-FallMenu-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-FallMenu-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 左右图标大小
|
||||
--tv-FallMenu-icon-font-size: var(--tv-font-size-default);
|
||||
--tv-FallMenu-icon-font-size: var(--tv-font-size-default, 14px);
|
||||
// 菜单项文本色
|
||||
--tv-FallMenu-slot-text-color: var(--tv-color-text);
|
||||
--tv-FallMenu-slot-text-color: var(--tv-color-text, #191919);
|
||||
// 悬浮下拉框背景色
|
||||
--tv-FallMenu-slot-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-FallMenu-slot-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 菜单项字号
|
||||
--tv-FallMenu-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-FallMenu-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 下拉框标题文本色
|
||||
--tv-FallMenu-box-title-text-color: var(--tv-color-text);
|
||||
--tv-FallMenu-box-title-text-color: var(--tv-color-text, #191919);
|
||||
// 下拉框文本色
|
||||
--tv-FallMenu-box-text-color: var(--tv-color-text-secondary);
|
||||
--tv-FallMenu-box-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 下拉框标题字号
|
||||
--tv-FallMenu-box-font-size: var(--tv-font-size-default);
|
||||
--tv-FallMenu-box-font-size: var(--tv-font-size-default, 14px);
|
||||
// 下拉框标题高度
|
||||
--tv-FallMenu-box-title-height: var(--tv-size-height-xs);
|
||||
--tv-FallMenu-box-title-height: var(--tv-size-height-xs, 24px);
|
||||
// 下拉框内容高度
|
||||
--tv-FallMenu-box-content-height: var(--tv-size-height-sm);
|
||||
--tv-FallMenu-box-content-height: var(--tv-size-height-sm, 28px);
|
||||
// 下拉框悬浮文本色
|
||||
--tv-FallMenu-box-hover-text-color: var(--tv-color-act-primary-text-hover);
|
||||
--tv-FallMenu-box-hover-text-color: var(--tv-color-act-primary-text-hover, #191919);
|
||||
// 标签下边框颜色值
|
||||
--tv-FallMenu-li-color-hover: var(--tv-color-act-primary-text-hover);
|
||||
--tv-FallMenu-li-color-hover: var(--tv-color-act-primary-text-hover, #191919);
|
||||
// 下拉框菜单文本字体大小
|
||||
--tv-FallMenu-box-a-font-size: var(--tv-font-size-sm);
|
||||
--tv-FallMenu-box-a-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 当前菜单悬浮字体
|
||||
--tv-FallMenu-box-font-size-hover: var(--tv-font-size-heading-xs);
|
||||
--tv-FallMenu-box-font-size-hover: var(--tv-font-size-heading-xs, 16px);
|
||||
// 当前菜单悬浮权重
|
||||
--tv-FallMenu-box-font-weight-hover: var(--tv-font-weight-bold);
|
||||
--tv-FallMenu-box-font-weight-hover: var(--tv-font-weight-bold, 600);
|
||||
// 图标填充颜色
|
||||
--tv-FallMenu-box-svg-fill: var(--tv-color-icon);
|
||||
--tv-FallMenu-box-svg-fill: var(--tv-color-icon, #808080);
|
||||
// 菜单列表圆角
|
||||
--tv-FallMenu-box-border-radius: var(--tv-border-radius-md);
|
||||
--tv-FallMenu-box-border-radius: var(--tv-border-radius-md, 6px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
*/
|
||||
|
||||
.inject-FileUpload-vars() {
|
||||
--tv-FileUpload-font-size: var(--tv-font-size-default);
|
||||
--tv-FileUpload-font-size: var(--tv-font-size-default, 14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,37 +11,37 @@
|
|||
*/
|
||||
.inject-FilterBox-vars() {
|
||||
// 按钮高度
|
||||
--tv-FilterBox-btn-height: var(--tv-size-height-xs);
|
||||
--tv-FilterBox-btn-height: var(--tv-size-height-xs, 24px);
|
||||
// 按钮背景色
|
||||
--tv-FilterBox-btn-bg-color: var(--tv-color-bg);
|
||||
--tv-FilterBox-btn-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 按钮悬浮背景色
|
||||
--tv-FilterBox-btn-hover-bg-color: var(--tv-color-bg-hover-3);
|
||||
--tv-FilterBox-btn-hover-bg-color: var(--tv-color-bg-hover-3, #deecff);
|
||||
// 按钮水平内边距
|
||||
--tv-FilterBox-btn-padding-x: var(--tv-space-md);
|
||||
--tv-FilterBox-btn-padding-x: var(--tv-space-md, 8px);
|
||||
// 按钮文本色
|
||||
--tv-FilterBox-btn-text-color: var(--tv-color-text-weaken);
|
||||
--tv-FilterBox-btn-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 按钮占位文本色
|
||||
--tv-FilterBox-btn-text-color-placeholder: var(--tv-color-text-placeholder);
|
||||
--tv-FilterBox-btn-text-color-placeholder: var(--tv-color-text-placeholder, #808080);
|
||||
// 按钮激活文本色
|
||||
--tv-FilterBox-btn-active-text-color: var(--tv-color-text);
|
||||
--tv-FilterBox-btn-active-text-color: var(--tv-color-text, #191919);
|
||||
// 按钮文本禁用色
|
||||
--tv-FilterBox-btn-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-FilterBox-btn-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 按钮文本字号
|
||||
--tv-FilterBox-btn-font-size: var(--tv-font-size-sm);
|
||||
--tv-FilterBox-btn-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 按钮文本行高
|
||||
--tv-FilterBox-btn-title-line-height: var(--tv-line-height-number);
|
||||
--tv-FilterBox-btn-title-line-height: var(--tv-line-height-number, 1.5);
|
||||
|
||||
// 按钮帮助图标右边距
|
||||
--tv-FilterBox-help-btn-margin-right: var(--tv-space-sm);
|
||||
--tv-FilterBox-help-btn-margin-right: var(--tv-space-sm, 4px);
|
||||
// 按钮帮助图标上边距
|
||||
--tv-FilterBox-help-btn-position-top: var(--tv-space-sm);
|
||||
--tv-FilterBox-help-btn-position-top: var(--tv-space-sm, 4px);
|
||||
|
||||
// 按钮图标色
|
||||
--tv-FilterBox-icon-color: var(--tv-color-icon);
|
||||
--tv-FilterBox-icon-color: var(--tv-color-icon, #808080);
|
||||
// 按钮图标悬浮色
|
||||
--tv-FilterBox-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-FilterBox-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 按钮图标禁用色
|
||||
--tv-FilterBox-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-FilterBox-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 按钮图标尺寸
|
||||
--tv-FilterBox-icon-size: var(--tv-icon-size);
|
||||
--tv-FilterBox-icon-size: var(--tv-icon-size, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
*/
|
||||
.inject-FilterPanel-vars() {
|
||||
// 面板上外边距
|
||||
--tv-FilterPanel-margin-top: var(--tv-space-md);
|
||||
--tv-FilterPanel-margin-top: var(--tv-space-md, 8px);
|
||||
// 面板垂直内边距
|
||||
--tv-FilterPanel-padding-y: 24px;
|
||||
// 面板水平内边距
|
||||
--tv-FilterPanel-padding-x: 24px;
|
||||
// 朝下的面板阴影
|
||||
--tv-FilterPanel-bottom-box-shadow: var(--tv-shadow-4-down);
|
||||
--tv-FilterPanel-bottom-box-shadow: var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));
|
||||
// 朝上的面板阴影
|
||||
--tv-FilterPanel-top-box-shadow: var(--tv-shadow-4-up);
|
||||
--tv-FilterPanel-top-box-shadow: var(--tv-shadow-4-up, 0 -8px 24px 0 rgba(0, 0, 0, 0.16));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
|
||||
.inject-Floatbar-vars() {
|
||||
// 浮动块圆角
|
||||
--tv-Floatbar-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Floatbar-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 浮动块字号
|
||||
--tv-Floatbar-font-size: var(--tv-font-size-default);
|
||||
--tv-Floatbar-font-size: var(--tv-font-size-default, 14px);
|
||||
// 浮动块背景色
|
||||
--tv-Floatbar-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Floatbar-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 选项悬浮背景色
|
||||
--tv-Floatbar-list-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Floatbar-list-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// ul,li边距
|
||||
--tv-Floatbar-list-margin-x: var(--tv-space-md);
|
||||
--tv-Floatbar-list-margin-x: var(--tv-space-md, 8px);
|
||||
// 列表项文本色
|
||||
--tv-Floatbar-list-text-color: var(--tv-color-text);
|
||||
--tv-Floatbar-list-text-color: var(--tv-color-text, #191919);
|
||||
// 列表项悬浮文本色
|
||||
--tv-Floatbar-list-text-color-hover: var(--tv-color-text-hover);
|
||||
--tv-Floatbar-list-text-color-hover: var(--tv-color-text-hover, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
|
||||
.inject-FluentEditor-vars() {
|
||||
// 富文本图标颜色
|
||||
--tv-FluentEditor-select-icon-color: var(--tv-color-icon);
|
||||
--tv-FluentEditor-select-icon-color: var(--tv-color-icon, #808080);
|
||||
// 富文本图标悬浮颜色
|
||||
--tv-FluentEditor-select-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-FluentEditor-select-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 富文本下拉选项背景色
|
||||
--tv-FluentEditor-select-bg-color: var(--tv-color-bg-2);
|
||||
--tv-FluentEditor-select-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 富文本下拉选项选中悬浮背景色
|
||||
--tv-FluentEditor-select-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-FluentEditor-select-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 富文本下拉选项文字
|
||||
--tv-FluentEditor-select-text-color: var(--tv-color-text);
|
||||
--tv-FluentEditor-select-text-color: var(--tv-color-text, #191919);
|
||||
// 富文本下拉选项文字边框
|
||||
--tv-FluentEditor-select-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-FluentEditor-select-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 富文本下拉已选文字颜色
|
||||
--tv-FluentEditor-selected-text-color: var(--tv-color-text-secondary);
|
||||
--tv-FluentEditor-selected-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 富文本下拉选项选中文字颜色
|
||||
--tv-FluentEditor-select-active-text-color: var(--tv-color-text-active);
|
||||
--tv-FluentEditor-select-active-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 富文本下拉选项面板圆角半径
|
||||
--tv-FluentEditor-select-border-radius: var(--tv-border-radius-md);
|
||||
--tv-FluentEditor-select-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 富文本下拉选项面板阴影
|
||||
--tv-FluentEditor-select-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-FluentEditor-select-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 富文本下拉框的图标颜色
|
||||
--tv-FluentEditor-select-box-icon-color: var(--tv-color-icon);
|
||||
--tv-FluentEditor-select-box-icon-color: var(--tv-color-icon, #808080);
|
||||
}
|
||||
|
|
@ -12,45 +12,45 @@
|
|||
|
||||
.inject-FormItem-vars() {
|
||||
// 表单项行高
|
||||
--tv-FormItem-line-height: var(--tv-line-height-number);
|
||||
--tv-FormItem-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 表单项字号大小
|
||||
--tv-FormItem-font-size: var(--tv-font-size-default);
|
||||
--tv-FormItem-font-size: var(--tv-font-size-default, 14px);
|
||||
// 表单项字体颜色
|
||||
--tv-FormItem-text-color: var(--tv-color-text);
|
||||
--tv-FormItem-text-color: var(--tv-color-text, #191919);
|
||||
// 表单项辅助字体颜色
|
||||
--tv-FormItem-text-color-weaken: var(--tv-color-text-weaken);
|
||||
--tv-FormItem-text-color-weaken: var(--tv-color-text-weaken, #808080);
|
||||
// 表单项错误提示字体颜色
|
||||
--tv-FormItem-text-color-error: var(--tv-color-error-text);
|
||||
--tv-FormItem-text-color-error: var(--tv-color-error-text, #f23030);
|
||||
// 表单项错误提示图标颜色
|
||||
--tv-FormItem-icon-color-error: var(--tv-color-error-icon);
|
||||
--tv-FormItem-icon-color-error: var(--tv-color-error-icon, #f23030);
|
||||
// 表单项错误背景颜色
|
||||
--tv-FormItem-bg-color-error: var(--tv-color-error-bg-light);
|
||||
--tv-FormItem-bg-color-error: var(--tv-color-error-bg-light, #fce3e1);
|
||||
// 表单项错误边框颜色
|
||||
--tv-FormItem-border-color-error: var(--tv-color-error-border);
|
||||
--tv-FormItem-border-color-error: var(--tv-color-error-border, #f23030);
|
||||
// 表单项高度
|
||||
--tv-FormItem-height: var(--tv-size-height-md);
|
||||
--tv-FormItem-height: var(--tv-size-height-md, 32px);
|
||||
// 表单项下侧外边距
|
||||
--tv-FormItem-margin-bottom: var(--tv-space-xxl);
|
||||
--tv-FormItem-margin-bottom: var(--tv-space-xxl, 24px);
|
||||
// 行内表单外边距
|
||||
--tv-FormItem-inline-margin-right: var(--tv-space-xxl);
|
||||
--tv-FormItem-inline-margin-right: var(--tv-space-xxl, 24px);
|
||||
// 表单校验块级错误消息上侧内边距
|
||||
--tv-FormItem-error-block-padding-top: var(--tv-space-md);
|
||||
--tv-FormItem-error-block-padding-top: var(--tv-space-md, 8px);
|
||||
// -------label相关样式-------
|
||||
// 表单输入框左侧文本内边距
|
||||
--tv-FormItem-label-padding-right: var(--tv-space-xxl);
|
||||
--tv-FormItem-label-padding-right: var(--tv-space-xxl, 24px);
|
||||
// -------大尺寸表单-------
|
||||
// 大尺寸表单项高度
|
||||
--tv-FormItem-height-lg: var(--tv-size-height-lg);
|
||||
--tv-FormItem-height-lg: var(--tv-size-height-lg, 40px);
|
||||
// 大尺寸表单项下侧外边距
|
||||
--tv-FormItem-margin-bottom-lg: var(--tv-space-xxl);
|
||||
--tv-FormItem-margin-bottom-lg: var(--tv-space-xxl, 24px);
|
||||
// -------小尺寸表单-------
|
||||
// 小尺寸表单项高度
|
||||
--tv-FormItem-height-sm: var(--tv-size-height-sm);
|
||||
--tv-FormItem-height-sm: var(--tv-size-height-sm, 28px);
|
||||
// 小尺寸表单项下侧外边距
|
||||
--tv-FormItem-margin-bottom-sm: var(--tv-space-xxl);
|
||||
--tv-FormItem-margin-bottom-sm: var(--tv-space-xxl, 24px);
|
||||
// -------mini尺寸表单-------
|
||||
// mini尺寸表单项高度
|
||||
--tv-FormItem-height-xs: var(--tv-size-height-xs);
|
||||
--tv-FormItem-height-xs: var(--tv-size-height-xs, 24px);
|
||||
// mini尺寸表单项下侧外边距
|
||||
--tv-FormItem-margin-bottom-xs: var(--tv-space-xl);
|
||||
--tv-FormItem-margin-bottom-xs: var(--tv-space-xl, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.inject-Form-vars() {
|
||||
// 表单图标大小
|
||||
--tv-Form-icon-size: var(--tv-icon-size);
|
||||
--tv-Form-icon-size: var(--tv-icon-size, 16px);
|
||||
// 表单错误提示图标颜色
|
||||
--tv-Form-icon-color-error: var(--tv-color-error-icon);
|
||||
--tv-Form-icon-color-error: var(--tv-color-error-icon, #f23030);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,212 +12,212 @@
|
|||
|
||||
.inject-Grid-vars() {
|
||||
// 表格字号
|
||||
--tv-Grid-font-size: var(--tv-font-size-default);
|
||||
--tv-Grid-font-size: var(--tv-font-size-default, 14px);
|
||||
// 表格行高
|
||||
--tv-Grid-line-height: var(--tv-line-height-number);
|
||||
--tv-Grid-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 表格文本色
|
||||
--tv-Grid-text-color: var(--tv-color-text);
|
||||
--tv-Grid-text-color: var(--tv-color-text, #191919);
|
||||
// 表格禁用文本色
|
||||
--tv-Grid-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Grid-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 表格二级文本颜色，页码项文本色
|
||||
--tv-Grid-text-color-secondary: var(--tv-color-text-secondary);
|
||||
--tv-Grid-text-color-secondary: var(--tv-color-text-secondary, #595959);
|
||||
// 表格辅助文本色
|
||||
--tv-Grid-text-color-weaken: var(--tv-color-text-weaken);
|
||||
--tv-Grid-text-color-weaken: var(--tv-color-text-weaken, #808080);
|
||||
// 页码悬浮文本色
|
||||
--tv-Grid-list-item-hover-text-color: var(--tv-color-text);
|
||||
--tv-Grid-list-item-hover-text-color: var(--tv-color-text, #191919);
|
||||
// 表格图标大小
|
||||
--tv-Grid-icon-size: var(--tv-icon-size);
|
||||
--tv-Grid-icon-size: var(--tv-icon-size, 16px);
|
||||
// 表格图标颜色
|
||||
--tv-Grid-icon-color: var(--tv-color-icon);
|
||||
--tv-Grid-icon-color: var(--tv-color-icon, #808080);
|
||||
// 表格图标悬浮颜色
|
||||
--tv-Grid-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Grid-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 表格图标激活颜色
|
||||
--tv-Grid-icon-color-active: var(--tv-color-icon-active);
|
||||
--tv-Grid-icon-color-active: var(--tv-color-icon-active, #191919);
|
||||
// 表格图标禁用颜色
|
||||
--tv-Grid-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Grid-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 表格分割线颜色
|
||||
--tv-Grid-border-color-divider: var(--tv-color-border-divider);
|
||||
--tv-Grid-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 表格边框颜色
|
||||
--tv-Grid-border-color: var(--tv-color-border);
|
||||
--tv-Grid-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 表格边框激活态颜色
|
||||
--tv-Grid-border-color-active: var(--tv-color-border-active);
|
||||
--tv-Grid-border-color-active: var(--tv-color-border-active, #191919);
|
||||
// 表格背景颜色
|
||||
--tv-Grid-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Grid-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 表格激活态背景色
|
||||
--tv-Grid-bg-color-active: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-Grid-bg-color-active: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 表格悬浮背景色
|
||||
--tv-Grid-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Grid-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 表格禁用背景色
|
||||
--tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 表格选中背景色
|
||||
--tv-Grid-bg-color-selected: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-Grid-bg-color-selected: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 表格浅灰色背景颜色（展开行、斑马纹等）
|
||||
--tv-Grid-gray-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-Grid-gray-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
// -------表头相关样式-------
|
||||
// 表头高度
|
||||
--tv-Grid-header-height: var(--tv-size-height-lg);
|
||||
--tv-Grid-header-height: var(--tv-size-height-lg, 40px);
|
||||
// 表头垂直间距
|
||||
--tv-Grid-header-padding-y: 4px;
|
||||
// 表头背景颜色
|
||||
--tv-Grid-header-bg-color: var(--tv-color-bg-header);
|
||||
--tv-Grid-header-bg-color: var(--tv-color-bg-header, #f5f5f5);
|
||||
// 表头悬浮高亮背景色
|
||||
--tv-Grid-header-bg-color-hover: var(--tv-color-bg-hover-1);
|
||||
--tv-Grid-header-bg-color-hover: var(--tv-color-bg-hover-1, #deecff);
|
||||
// 表头字体颜色
|
||||
--tv-Grid-header-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Grid-header-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 表头分割线颜色
|
||||
--tv-Grid-header-divider-color: var(--tv-color-border-divider-short);
|
||||
--tv-Grid-header-divider-color: var(--tv-color-border-divider-short, #dbdbdb);
|
||||
// 表头字重
|
||||
--tv-Grid-header-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Grid-header-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 表头必填星号颜色
|
||||
--tv-Grid-header-required-icon-color: var(--tv-color-error-text);
|
||||
--tv-Grid-header-required-icon-color: var(--tv-color-error-text, #f23030);
|
||||
// -------校验相关样式-------
|
||||
// 错误检验文本颜色
|
||||
--tv-Grid-error-text-color: var(--tv-color-error-text);
|
||||
--tv-Grid-error-text-color: var(--tv-color-error-text, #f23030);
|
||||
// 错误检验边框颜色
|
||||
--tv-Grid-error-border-color: var(--tv-color-error-border);
|
||||
--tv-Grid-error-border-color: var(--tv-color-error-border, #f23030);
|
||||
// 错误检验浅色背景颜色
|
||||
--tv-Grid-error-bg-color-light: var(--tv-color-error-bg-light);
|
||||
--tv-Grid-error-bg-color-light: var(--tv-color-error-bg-light, #fce3e1);
|
||||
// 错误检验背景颜色
|
||||
--tv-Grid-error-bg-color: var(--tv-color-error-bg);
|
||||
--tv-Grid-error-bg-color: var(--tv-color-error-bg, #f23030);
|
||||
// 错误检验图标颜色
|
||||
--tv-Grid-error-icon-color: var(--tv-color-error-icon);
|
||||
--tv-Grid-error-icon-color: var(--tv-color-error-icon, #f23030);
|
||||
// 成功校验边框颜色
|
||||
--tv-Grid-success-border-color: var(--tv-color-success-border);
|
||||
--tv-Grid-success-border-color: var(--tv-color-success-border, #5cb300);
|
||||
// 成功校验图标颜色
|
||||
--tv-Grid-success-icon-color: var(--tv-color-success-icon);
|
||||
--tv-Grid-success-icon-color: var(--tv-color-success-icon, #5cb300);
|
||||
// 成功校验背景颜色
|
||||
--tv-Grid-success-bg-color: var(--tv-color-success-bg);
|
||||
--tv-Grid-success-bg-color: var(--tv-color-success-bg, #5cb300);
|
||||
// 告警背景颜色
|
||||
--tv-Grid-warn-bg-color: var(--tv-color-warn-bg);
|
||||
--tv-Grid-warn-bg-color: var(--tv-color-warn-bg, #ff8800);
|
||||
// 主要背景颜色
|
||||
--tv-Grid-primary-bg-color: var(--tv-color-info-text-primary);
|
||||
--tv-Grid-primary-bg-color: var(--tv-color-info-text-primary, #191919);
|
||||
// -------单元格样式-------
|
||||
// 单元格高度
|
||||
--tv-Grid-cell-height: var(--tv-size-height-xl);
|
||||
--tv-Grid-cell-height: var(--tv-size-height-xl, 48px);
|
||||
// 单元格垂直内边距
|
||||
--tv-Grid-cell-padding-y: calc(var(--tv-space-table-y, 4px) * 3);
|
||||
// 单元格水平内边距
|
||||
--tv-Grid-cell-padding-x: calc(var(--tv-space-table-x, 4px) * 4);
|
||||
// 单元格选中时边框颜色
|
||||
--tv-Grid-cell-border-color-selected: var(--tv-color-border-active);
|
||||
--tv-Grid-cell-border-color-selected: var(--tv-color-border-active, #191919);
|
||||
// -------多选框相关样式-------
|
||||
// 多选框图标大小
|
||||
--tv-Grid-checkbox-icon-size: calc(var(--tv-icon-size) + 2px);
|
||||
--tv-Grid-checkbox-icon-size: calc(var(--tv-icon-size, 16px) + 2px);
|
||||
// 多选框图标颜色
|
||||
--tv-Grid-checkbox-icon-color: var(--tv-color-border);
|
||||
--tv-Grid-checkbox-icon-color: var(--tv-color-border, #c2c2c2);
|
||||
// 多选框图标悬浮颜色
|
||||
--tv-Grid-checkbox-icon-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Grid-checkbox-icon-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 多选框图标选中颜色
|
||||
--tv-Grid-checkbox-icon-color-selected: var(--tv-color-bg-active-control);
|
||||
--tv-Grid-checkbox-icon-color-selected: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 多选框图标禁用颜色
|
||||
--tv-Grid-checkbox-icon-color-disabled: var(--tv-color-bg-active-control);
|
||||
--tv-Grid-checkbox-icon-color-disabled: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 多选框禁用背景颜色
|
||||
--tv-Grid-checkbox-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Grid-checkbox-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 多选框禁用边框颜色
|
||||
--tv-Grid-checkbox-border-color-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Grid-checkbox-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 多选框边框圆角
|
||||
--tv-Grid-checkbox-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Grid-checkbox-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// ------单选框相关样式-------
|
||||
// 单选框图标大小
|
||||
--tv-Grid-radio-icon-size: calc(var(--tv-icon-size) + 2px);
|
||||
--tv-Grid-radio-icon-size: calc(var(--tv-icon-size, 16px) + 2px);
|
||||
// 单选框图标颜色
|
||||
--tv-Grid-radio-icon-color: var(--tv-color-border);
|
||||
--tv-Grid-radio-icon-color: var(--tv-color-border, #c2c2c2);
|
||||
// 单选框图标悬浮颜色
|
||||
--tv-Grid-radio-icon-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Grid-radio-icon-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 单选框图标选中颜色
|
||||
--tv-Grid-radio-icon-color-selected: var(--tv-color-bg-active-control);
|
||||
--tv-Grid-radio-icon-color-selected: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 单选框禁用颜色
|
||||
--tv-Grid-radio-icon-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Grid-radio-icon-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 单选框禁用边框色
|
||||
--tv-Grid-radio-border-color-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Grid-radio-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// -------筛选相关样式-------
|
||||
// 筛选一般背景色
|
||||
--tv-Grid-filter-bg-color: var(--tv-color-bg);
|
||||
--tv-Grid-filter-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 筛选悬浮背景色
|
||||
--tv-Grid-filter-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Grid-filter-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 筛选输入框悬浮边框颜色
|
||||
--tv-Grid-filter-input-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Grid-filter-input-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 筛选输入框边框圆角
|
||||
--tv-Grid-filter-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Grid-filter-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 筛选输入框边框背景
|
||||
--tv-Grid-filter-input-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Grid-filter-input-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// -------工具栏相关样式-------
|
||||
// 工具栏垂直边距
|
||||
--tv-Grid-toolbar-padding-y: var(--tv-space-xl);
|
||||
--tv-Grid-toolbar-padding-y: var(--tv-space-xl, 16px);
|
||||
// 工具栏图标按钮大小
|
||||
--tv-Grid-toolbar-btn-icon-size: 14px;
|
||||
// 工具栏图标容器大小
|
||||
--tv-Grid-toolbar-btn-container-size: var(--tv-size-height-md);
|
||||
--tv-Grid-toolbar-btn-container-size: var(--tv-size-height-md, 32px);
|
||||
// 工具栏图标按钮颜色
|
||||
--tv-Grid-toolbar-btn-icon-color: var(--tv-color-icon-control);
|
||||
--tv-Grid-toolbar-btn-icon-color: var(--tv-color-icon-control, #191919);
|
||||
// 工具栏图标按钮边框色
|
||||
--tv-Grid-toolbar-btn-icon-border-color: var(--tv-color-border);
|
||||
--tv-Grid-toolbar-btn-icon-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 工具栏图标按钮悬浮边框色
|
||||
--tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 工具栏图标按钮边框圆角
|
||||
--tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 工具栏字体颜色
|
||||
--tv-Grid-column-anchor-text-color: var(--tv-color-text);
|
||||
--tv-Grid-column-anchor-text-color: var(--tv-color-text, #191919);
|
||||
// -------mini/small表格-------
|
||||
// mini表格表头高度
|
||||
--tv-Grid-header-height-mini: var(--tv-size-height-sm);
|
||||
--tv-Grid-header-height-mini: var(--tv-size-height-sm, 28px);
|
||||
// mini单元格高度
|
||||
--tv-Grid-cell-height-mini: var(--tv-size-height-md);
|
||||
--tv-Grid-cell-height-mini: var(--tv-size-height-md, 32px);
|
||||
// mini表格单元格水平内边距
|
||||
--tv-Grid-cell-padding-x-mini: calc(var(--tv-space-table-x, 4px) * 4);
|
||||
// mini表格单元格垂直内边距
|
||||
--tv-Grid-cell-padding-y-mini: calc(var(--tv-space-table-y, 4px) * 1);
|
||||
// small表格表头高度
|
||||
--tv-Grid-header-height-small: var(--tv-size-height-md);
|
||||
--tv-Grid-header-height-small: var(--tv-size-height-md, 32px);
|
||||
// small单元格高度
|
||||
--tv-Grid-cell-height-small: var(--tv-size-height-lg);
|
||||
--tv-Grid-cell-height-small: var(--tv-size-height-lg, 40px);
|
||||
// small表格单元格水平内边距
|
||||
--tv-Grid-cell-padding-x-small: calc(var(--tv-space-table-x, 4px) * 4);
|
||||
// small表格单元格垂直内边距
|
||||
--tv-Grid-cell-padding-y-small: calc(var(--tv-space-table-y, 4px) * 2);
|
||||
// -------其他-------
|
||||
// 树节点图标右侧内边距
|
||||
--tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
|
||||
--tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md, 8px);
|
||||
// 内置输入框高度
|
||||
--tv-Grid-input-height: var(--tv-size-height-md);
|
||||
--tv-Grid-input-height: var(--tv-size-height-md, 32px);
|
||||
// 内置输入框垂直方向内边距
|
||||
--tv-Grid-input-padding-x: 0;
|
||||
// 内置输入框水平方向内边距
|
||||
--tv-Grid-input-padding-y: 12px;
|
||||
// 内置输入框文本颜色
|
||||
--tv-Grid-input-text-color: var(--tv-color-text);
|
||||
--tv-Grid-input-text-color: var(--tv-color-text, #191919);
|
||||
// 内置输入框边框色
|
||||
--tv-Grid-input-border-color: var(--tv-color-border);
|
||||
--tv-Grid-input-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 内置输入框框字体大小
|
||||
--tv-Grid-input-font-size: var(--tv-font-size-default);
|
||||
--tv-Grid-input-font-size: var(--tv-font-size-default, 14px);
|
||||
// 内置输入框背景色
|
||||
--tv-Grid-input-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Grid-input-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 内置输入框边框圆角
|
||||
--tv-Grid-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Grid-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 内置输入框悬浮边框颜色
|
||||
--tv-Grid-input-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Grid-input-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 内置按钮背景色
|
||||
--tv-Grid-button-bg-color-default: var(--tv-color-bg-secondary);
|
||||
--tv-Grid-button-bg-color-default: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 内置按钮行号
|
||||
--tv-Grid-button-line-height: var(--tv-line-height-number);
|
||||
--tv-Grid-button-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 内置按钮高度
|
||||
--tv-Grid-button-height: var(--tv-size-height-md);
|
||||
--tv-Grid-button-height: var(--tv-size-height-md, 32px);
|
||||
// 内置按钮边框色
|
||||
--tv-Grid-button-border-color-default: var(--tv-color-border-secondary);
|
||||
--tv-Grid-button-border-color-default: var(--tv-color-border-secondary, #595959);
|
||||
// 内置按钮文字色
|
||||
--tv-Grid-button-text-color-default: var(--tv-color-text);
|
||||
--tv-Grid-button-text-color-default: var(--tv-color-text, #191919);
|
||||
// 内置按钮文字色
|
||||
--tv-Grid-button-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Grid-button-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 内置按钮激活状态边框色
|
||||
--tv-Grid-button-border-color-active-default: var(--tv-color-border-secondary-hover);
|
||||
--tv-Grid-button-border-color-active-default: var(--tv-color-border-secondary-hover, #c2c2c2);
|
||||
// 内置按钮padding
|
||||
--tv-Grid-button-padding-x: 24px;
|
||||
// 内置select的下拉框背景色
|
||||
--tv-Grid-select-option-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Grid-select-option-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 内置select的下拉框选中状态背景色
|
||||
--tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 加载中背景色
|
||||
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask);
|
||||
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// 表格无数据背景图片
|
||||
--tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,63 +4,63 @@
|
|||
// 引导框箭头宽度
|
||||
--tv-Guide-arrow-width: 16px;
|
||||
// 引导框边框圆角
|
||||
--tv-Guide-header-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Guide-header-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 引导框头部行高
|
||||
--tv-Guide-header-line-height: var(--tv-line-height-number);
|
||||
--tv-Guide-header-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 引导框头部背景色
|
||||
--tv-Guide-header-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Guide-header-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 引导框标题文本色
|
||||
--tv-Guide-title-text-color: var(--tv-color-text);
|
||||
--tv-Guide-title-text-color: var(--tv-color-text, #191919);
|
||||
// 引导框标题行高
|
||||
--tv-Guide-title-line-height: var(--tv-line-height-number);
|
||||
--tv-Guide-title-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 引导框标题字重
|
||||
--tv-Guide-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Guide-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 引导框标题字号
|
||||
--tv-Guide-title-text-font-size: var(--tv-font-size-lg);
|
||||
--tv-Guide-title-text-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 引导框关闭按钮图标宽度
|
||||
--tv-Guide-cancel-icon-width: var(--tv-icon-size);
|
||||
--tv-Guide-cancel-icon-width: var(--tv-icon-size, 16px);
|
||||
// 引导框关闭按钮图标高度
|
||||
--tv-Guide-cancel-icon-height: var(--tv-icon-size);
|
||||
--tv-Guide-cancel-icon-height: var(--tv-icon-size, 16px);
|
||||
// 引导框关闭按钮图标颜色
|
||||
--tv-Guide-cancel-icon-color: var(--tv-color-icon);
|
||||
--tv-Guide-cancel-icon-color: var(--tv-color-icon, #808080);
|
||||
// 引导框关闭按钮图标悬浮色
|
||||
--tv-Guide-cancel-hover-icon-color: var(--tv-color-icon-hover);
|
||||
--tv-Guide-cancel-hover-icon-color: var(--tv-color-icon-hover, #191919);
|
||||
// 引导框内容文本色
|
||||
--tv-Guide-text-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Guide-text-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 引导框内容行高
|
||||
--tv-Guide-text-line-height: var(--tv-line-height-number);
|
||||
--tv-Guide-text-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 引导框内容字号
|
||||
--tv-Guide-text-font-size: var(--tv-font-size-default);
|
||||
--tv-Guide-text-font-size: var(--tv-font-size-default, 14px);
|
||||
// 引导框内容滚动条边框色
|
||||
--tv-Guide-text-scrollbar-border-color: var(--tv-color-bg-scrollbar-thumb);
|
||||
--tv-Guide-text-scrollbar-border-color: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
|
||||
// 引导框底部右下圆角
|
||||
--tv-Guide-footer-border-bottom-right-radius: var(--tv-border-radius-lg);
|
||||
--tv-Guide-footer-border-bottom-right-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 引导框底部左下圆角
|
||||
--tv-Guide-footer-border-bottom-left-radius: var(--tv-border-radius-lg);
|
||||
--tv-Guide-footer-border-bottom-left-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 引导框进度条文本颜色
|
||||
--tv-Guide-progress-text-color: var(--tv-color-text);
|
||||
--tv-Guide-progress-text-color: var(--tv-color-text, #191919);
|
||||
// 引导框按钮默认样式文本色
|
||||
--tv-Guide-button-text-color: var(--tv-color-text);
|
||||
--tv-Guide-button-text-color: var(--tv-color-text, #191919);
|
||||
// 引导框按钮默认样式边框色
|
||||
--tv-Guide-button-border-color: var(--tv-color-border-secondary);
|
||||
--tv-Guide-button-border-color: var(--tv-color-border-secondary, #595959);
|
||||
// 引导框按钮默认样式圆角
|
||||
--tv-Guide-button-border-radius: var(--tv-border-radius-brand);
|
||||
--tv-Guide-button-border-radius: var(--tv-border-radius-brand, 999px);
|
||||
// 引导框按钮默认样式背景色
|
||||
--tv-Guide-button-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Guide-button-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 引导框按钮默认样式悬浮边框色
|
||||
--tv-Guide-button-hover-border-color: var(--tv-color-border);
|
||||
--tv-Guide-button-hover-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 引导框按钮默认样式禁用背景色
|
||||
--tv-Guide-button-disable-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Guide-button-disable-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 引导框按钮默认样式禁用文本色
|
||||
--tv-Guide-button-disable-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Guide-button-disable-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 引导框按钮文字尺寸
|
||||
--tv-Guide-button-font-size: var(--tv-font-size-sm);
|
||||
--tv-Guide-button-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 引导框按钮宽度
|
||||
--tv-Guide-button-width: 68px;
|
||||
// 引导框按钮高度
|
||||
--tv-Guide-button-height: var(--tv-size-height-xs);
|
||||
--tv-Guide-button-height: var(--tv-size-height-xs, 24px);
|
||||
// 引导框边框圆角
|
||||
--tv-Guide-shepherd-element-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Guide-shepherd-element-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 分页提示文字颜色
|
||||
--tv-Guide-progresss-text-color: var(--tv-color-text-weaken);
|
||||
--tv-Guide-progresss-text-color: var(--tv-color-text-weaken, #808080);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
*/
|
||||
|
||||
.inject-Hrapprover-vars() {
|
||||
--tv-Hrapprover-error-border-color: var(--tv-color-error-bg);
|
||||
--tv-Hrapprover-table-text-color: var(--tv-color-text);
|
||||
--tv-Hrapprover-table-font-size: var(--tv-font-size-default);
|
||||
--tv-Hrapprover-tr-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-Hrapprover-tr-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Hrapprover-tr-odd-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Hrapprover-th-height: var(--tv-size-height-xs);
|
||||
--tv-Hrapprover-thead-border-color: var(--tv-color-border);
|
||||
--tv-Hrapprover-thead-bg-color: var(--tv-color-bg-header);
|
||||
--tv-Hrapprover-error-border-color: var(--tv-color-error-bg, #f23030);
|
||||
--tv-Hrapprover-table-text-color: var(--tv-color-text, #191919);
|
||||
--tv-Hrapprover-table-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-Hrapprover-tr-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
--tv-Hrapprover-tr-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
--tv-Hrapprover-tr-odd-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
--tv-Hrapprover-th-height: var(--tv-size-height-xs, 24px);
|
||||
--tv-Hrapprover-thead-border-color: var(--tv-color-border, #c2c2c2);
|
||||
--tv-Hrapprover-thead-bg-color: var(--tv-color-bg-header, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
*/
|
||||
|
||||
.inject-ImageViewer-vars() {
|
||||
--tv-ImageViewer-text-color: var(--tv-color-success-text-white);
|
||||
--tv-ImageViewer-actions-inner-text-color: var(--tv-color-success-text-white);
|
||||
--tv-ImageViewer-close-font-size: var(--tv-font-size-xxl);
|
||||
--tv-ImageViewer-close-bg-color: var(--tv-color-bg-control-unactive);
|
||||
--tv-ImageViewer-actions-border-radius: var(--tv-border-radius-round);
|
||||
--tv-ImageViewer-actions-height: var(--tv-size-height-lg);
|
||||
--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-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);
|
||||
--tv-ImageViewer-actions-height: var(--tv-size-height-lg, 40px);
|
||||
--tv-ImageViewer-next-font-size: 24px;
|
||||
--tv-ImageViewer-next-width: var(--tv-size-height-lg);
|
||||
--tv-ImageViewer-next-height: var(--tv-size-height-lg);
|
||||
--tv-ImageViewer-actions-icon-margin-right: var(--tv-space-xl);
|
||||
--tv-ImageViewer-actions-count-font-size: var(--tv-font-size-default);
|
||||
--tv-ImageViewer-next-width: var(--tv-size-height-lg, 40px);
|
||||
--tv-ImageViewer-next-height: var(--tv-size-height-lg, 40px);
|
||||
--tv-ImageViewer-actions-icon-margin-right: var(--tv-space-xl, 16px);
|
||||
--tv-ImageViewer-actions-count-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-ImageViewer-prev-left: 32px;
|
||||
--tv-ImageViewer-next-right: 32px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,53 +11,53 @@
|
|||
|
||||
.inject-Input-vars() {
|
||||
// 输入框文本颜色
|
||||
--tv-Input-text-color: var(--tv-color-text);
|
||||
--tv-Input-text-color: var(--tv-color-text, #191919);
|
||||
// 输入框背景颜色
|
||||
--tv-Input-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Input-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 输入框字体大小
|
||||
--tv-Input-font-size: var(--tv-font-size-default);
|
||||
--tv-Input-font-size: var(--tv-font-size-default, 14px);
|
||||
// 输入框计数器字体大小
|
||||
--tv-Input-count-font-size: var(--tv-font-size-sm);
|
||||
--tv-Input-count-font-size: var(--tv-font-size-sm, 12px);
|
||||
// small和mini尺寸字体大小
|
||||
--tv-Input-small-font-size: var(--tv-font-size-sm);
|
||||
--tv-Input-small-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 输入框高度v
|
||||
--tv-Input-height: var(--tv-size-height-md);
|
||||
--tv-Input-height: var(--tv-size-height-md, 32px);
|
||||
// 输入框边框圆角
|
||||
--tv-Input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 输入框边框色
|
||||
--tv-Input-border-color: var(--tv-color-border);
|
||||
--tv-Input-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 输入框hover时边框色
|
||||
--tv-Input-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Input-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 输入框active时边框色
|
||||
--tv-Input-active-border-color: var(--tv-color-border-active);
|
||||
--tv-Input-active-border-color: var(--tv-color-border-active, #191919);
|
||||
// icon颜色
|
||||
--tv-Input-icon-color: var(--tv-color-icon);
|
||||
--tv-Input-icon-color: var(--tv-color-icon, #808080);
|
||||
// icon图标hover时颜色
|
||||
--tv-Input-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Input-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 输入框聚焦时icon颜色
|
||||
--tv-Input-focus-icon-color: var(--tv-color-icon-active);
|
||||
--tv-Input-focus-icon-color: var(--tv-color-icon-active, #191919);
|
||||
// suffix图标颜色
|
||||
--tv-Input-suffix-icon-color: var(--tv-color-icon);
|
||||
--tv-Input-suffix-icon-color: var(--tv-color-icon, #808080);
|
||||
// 输入框占位符文本颜色
|
||||
--tv-Input-placeholder-text-color: var(--tv-color-text-placeholder);
|
||||
--tv-Input-placeholder-text-color: var(--tv-color-text-placeholder, #808080);
|
||||
// 输入框disabled时的文本颜色
|
||||
--tv-Input-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Input-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 输入框medium尺寸的高度
|
||||
--tv-Input-medium-height: var(--tv-size-height-lg);
|
||||
--tv-Input-medium-height: var(--tv-size-height-lg, 40px);
|
||||
// 输入框small尺寸的高度
|
||||
--tv-Input-small-height: var(--tv-size-height-sm);
|
||||
--tv-Input-small-height: var(--tv-size-height-sm, 28px);
|
||||
// 输入框mini尺寸的高度
|
||||
--tv-Input-mini-height: var(--tv-size-height-xs);
|
||||
--tv-Input-mini-height: var(--tv-size-height-xs, 24px);
|
||||
// 输入框disabled时的背景颜色
|
||||
--tv-Input-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Input-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 输入框disabled时的边框颜色
|
||||
--tv-Input-disabled-border-color: var(--tv-color-border-disabled);
|
||||
--tv-Input-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 输入框exceed时的文本颜色
|
||||
--tv-Input-exceed-text-color: var(--tv-color-error-text);
|
||||
--tv-Input-exceed-text-color: var(--tv-color-error-text, #f23030);
|
||||
// 输入框的icon图标的大小
|
||||
--tv-Input-icon-font-size: var(--tv-icon-size);
|
||||
--tv-Input-icon-font-size: var(--tv-icon-size, 16px);
|
||||
// 输入框计数器的颜色
|
||||
--tv-Input-count-font-color: var(--tv-color-text-weaken);
|
||||
--tv-Input-count-font-color: var(--tv-color-text-weaken, #808080);
|
||||
// 输入框垂直方向内边距
|
||||
--tv-Input-padding-x: 0;
|
||||
// 输入框水平方向内边距
|
||||
|
|
@ -77,5 +77,5 @@
|
|||
// 输入框suffix的高度
|
||||
--tv-Input-suffix-icon-height: 16px;
|
||||
// displayOnly 时文本行高
|
||||
--tv-Input-display-content-line-height: var(--tv-line-height-number);
|
||||
--tv-Input-display-content-line-height: var(--tv-line-height-number, 1.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,47 +12,47 @@
|
|||
|
||||
.inject-IpAddress-vars() {
|
||||
// IP地址输入框高度
|
||||
--tv-IpAddress-normal-height: var(--tv-size-height-md);
|
||||
--tv-IpAddress-normal-height: var(--tv-size-height-md, 32px);
|
||||
// IP地址输入框宽度
|
||||
--tv-IpAddress-normal-width: 182px;
|
||||
// IP地址输入框默认水平内边距
|
||||
--tv-IpAddress-padding-x: var(--tv-space-lg);
|
||||
--tv-IpAddress-padding-x: var(--tv-space-lg, 12px);
|
||||
// Ip6单个内容左margin
|
||||
--tv-IpAddress-ipv6-delimiter-margin-right: var(--tv-space-sm);
|
||||
--tv-IpAddress-ipv6-delimiter-margin-right: var(--tv-space-sm, 4px);
|
||||
// IP地址输入框默认文本色
|
||||
--tv-IpAddress-normal-text-color: var(--tv-color-text);
|
||||
--tv-IpAddress-normal-text-color: var(--tv-color-text, #191919);
|
||||
// IP地址输入框图标文本色
|
||||
--tv-IpAddress-icon-color: var(--tv-color-icon);
|
||||
--tv-IpAddress-icon-color: var(--tv-color-icon, #808080);
|
||||
// IP地址输入框图标尺寸
|
||||
--tv-IpAddress-icon-size: 10px;
|
||||
// IP地址输入框禁用文本色
|
||||
--tv-IpAddress-normal-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-IpAddress-normal-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// IP地址输入框默认边框色
|
||||
--tv-IpAddress-normal-border-color: var(--tv-color-border);
|
||||
--tv-IpAddress-normal-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// IP地址输入框默认背景色
|
||||
--tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// IP地址输入框圆角
|
||||
--tv-IpAddress-border-radius: var(--tv-border-radius-md);
|
||||
--tv-IpAddress-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// IP地址输入框字号
|
||||
--tv-IpAddress-font-size: var(--tv-font-size-default);
|
||||
--tv-IpAddress-font-size: var(--tv-font-size-default, 14px);
|
||||
// IP地址输入框字族
|
||||
--tv-IpAddress-normal-font-family: var(--tv-font-family-1);
|
||||
--tv-IpAddress-normal-font-family: var(--tv-font-family-1, 'Arial', 'San Francisco', 'Helvetica');
|
||||
// IP地址输入框聚焦边框色
|
||||
--tv-IpAddress-border-color-focus: var(--tv-color-border-active);
|
||||
--tv-IpAddress-border-color-focus: var(--tv-color-border-active, #191919);
|
||||
// IP地址输入框悬浮边框色
|
||||
--tv-IpAddress-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-IpAddress-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// IP地址输入框禁用背景色
|
||||
--tv-IpAddress-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-IpAddress-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// IP地址输入框禁用边框色
|
||||
--tv-IpAddress-disabled-border-color: var(--tv-color-border-disabled);
|
||||
--tv-IpAddress-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// Ip地址输入框item宽度
|
||||
--tv-IpAddress-input-width: 32px;
|
||||
// 大尺寸高度
|
||||
--tv-IpAddress-medium-height: calc(var(--tv-size-height-lg) - 2px);
|
||||
--tv-IpAddress-medium-height: calc(var(--tv-size-height-lg, 40px) - 2px);
|
||||
// 默认尺寸高度
|
||||
--tv-IpAddress-default-height: calc(var(--tv-size-height-md) - 2px);
|
||||
--tv-IpAddress-default-height: calc(var(--tv-size-height-md, 32px) - 2px);
|
||||
// 小尺寸高度
|
||||
--tv-IpAddress-small-height: calc(var(--tv-size-height-sm) - 2px);
|
||||
--tv-IpAddress-small-height: calc(var(--tv-size-height-sm, 28px) - 2px);
|
||||
// 超小尺寸高度
|
||||
--tv-IpAddress-mini-height: calc(var(--tv-size-height-xs) - 2px);
|
||||
--tv-IpAddress-mini-height: calc(var(--tv-size-height-xs, 24px) - 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,33 +12,33 @@
|
|||
|
||||
.inject-LinkMenu-vars() {
|
||||
// 收藏夹设置按钮图标色(和取消按钮文本色)
|
||||
--tv-LinkMenu-nav-item-text-color: var(--tv-color-text);
|
||||
--tv-LinkMenu-nav-item-text-color: var(--tv-color-text, #191919);
|
||||
// 收藏夹设置字体大小
|
||||
--tv-LinkMenu-item-font-size: var(--tv-font-size-default);
|
||||
--tv-LinkMenu-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 收藏夹菜单导航右边框色
|
||||
--tv-LinkMenu-nav-item-border-color: var(--tv-color-border);
|
||||
--tv-LinkMenu-nav-item-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 收藏夹菜单按钮文本色
|
||||
--tv-LinkMenu-btn-text-color: var(--tv-color-info-text);
|
||||
--tv-LinkMenu-btn-text-color: var(--tv-color-info-text, #1476ff);
|
||||
// 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
|
||||
--tv-LinkMenu-btn-bg-color: var(--tv-color-info-bg-white);
|
||||
--tv-LinkMenu-btn-bg-color: var(--tv-color-info-bg-white, #ffffff);
|
||||
// 收藏夹弹出框的输入框高度
|
||||
--tv-LinkMenu-input-height: var(--tv-size-height-md);
|
||||
--tv-LinkMenu-input-height: var(--tv-size-height-md, 32px);
|
||||
// 收藏夹弹出框字号
|
||||
--tv-LinkMenu-input-font-size: var(--tv-font-size-default);
|
||||
--tv-LinkMenu-input-font-size: var(--tv-font-size-default, 14px);
|
||||
// 收藏夹弹出框输入框(和列表项非节点)的文本色
|
||||
--tv-LinkMenu-input-text-color: var(--tv-color-text);
|
||||
--tv-LinkMenu-input-text-color: var(--tv-color-text, #191919);
|
||||
// 收藏夹弹出框的输入框和取消按钮边框色
|
||||
--tv-LinkMenu-input-border-color: var(--tv-color-border);
|
||||
--tv-LinkMenu-input-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 收藏夹弹出框的输入框圆角
|
||||
--tv-LinkMenu-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-LinkMenu-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 收藏夹弹出框列表项的节点文本色
|
||||
--tv-LinkMenu-tree-node-text-color: var(--tv-color-border);
|
||||
--tv-LinkMenu-tree-node-text-color: var(--tv-color-border, #c2c2c2);
|
||||
// 按钮边框颜色
|
||||
--tv-LinkMenu-btn-border-color: var(--tv-color-border);
|
||||
--tv-LinkMenu-btn-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 按钮圆角
|
||||
--tv-LinkMenu-btn-border-radius: var(--tv-border-radius-md);
|
||||
--tv-LinkMenu-btn-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 按钮大小
|
||||
--tv-LinkMenu-btn-size: var(--tv-font-size-lg);
|
||||
--tv-LinkMenu-btn-size: var(--tv-font-size-lg, 16px);
|
||||
// 图标大小
|
||||
--tv-LinkMenu-icon-size: var(--tv-icon-size);
|
||||
--tv-LinkMenu-icon-size: var(--tv-icon-size, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,84 +12,84 @@
|
|||
|
||||
.inject-Link-vars() {
|
||||
// 链接字号
|
||||
--tv-Link-font-size: var(--tv-font-size-default);
|
||||
--tv-Link-font-size: var(--tv-font-size-default, 14px);
|
||||
// 链接字重
|
||||
--tv-Link-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Link-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 链接下划线色(hide)
|
||||
--tv-Link-border-color: var(--tv-color-border-hover);
|
||||
--tv-Link-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 链接有图标时下划线宽度(hide)
|
||||
--tv-Link-has-icon-underline-width: calc(100% - 20px);
|
||||
// 链接是否显示
|
||||
--tv-Link-display: inline;
|
||||
// 链接图标宽度
|
||||
--tv-Link-svg-width: var(--tv-font-size-lg);
|
||||
--tv-Link-svg-width: var(--tv-font-size-lg, 16px);
|
||||
// 链接图标高度
|
||||
--tv-Link-svg-height: var(--tv-font-size-xxl);
|
||||
--tv-Link-svg-height: var(--tv-font-size-xxl, 20px);
|
||||
// 链接图标右侧外边距
|
||||
--tv-Link-svg-margin-right: var(--tv-space-sm);
|
||||
--tv-Link-svg-margin-right: var(--tv-space-sm, 4px);
|
||||
|
||||
// 链接图标悬浮字重
|
||||
--tv-Link-icon-hover-text-weight: var(--tv-font-weight-regular);
|
||||
--tv-Link-icon-hover-text-weight: var(--tv-font-weight-regular, 400);
|
||||
|
||||
// 默认链接文本色
|
||||
--tv-Link-default-text-color: var(--tv-color-text-link);
|
||||
--tv-Link-default-text-color: var(--tv-color-text-link, #1476ff);
|
||||
// 默认链接悬浮下划线色
|
||||
--tv-Link-default-border-color: var(--tv-color-text-link-hover);
|
||||
--tv-Link-default-border-color: var(--tv-color-text-link-hover, #1476ff);
|
||||
// 默认链接悬浮文本色
|
||||
--tv-Link-default-hover-text-color: var(--tv-color-text-link-hover);
|
||||
--tv-Link-default-hover-text-color: var(--tv-color-text-link-hover, #1476ff);
|
||||
// 默认链接禁用文本色
|
||||
--tv-Link-default-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-default-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 默认链接悬浮下划线色
|
||||
--tv-Link-default-hover-border-color: var(--tv-color-act-primary-border-hover);
|
||||
--tv-Link-default-hover-border-color: var(--tv-color-act-primary-border-hover, #595959);
|
||||
|
||||
// 主要链接文本色
|
||||
--tv-Link-primary-text-color: var(--tv-color-text-link-1);
|
||||
--tv-Link-primary-text-color: var(--tv-color-text-link-1, #191919);
|
||||
|
||||
// 主要链接悬浮下划线色
|
||||
--tv-Link-primary-border-color: var(--tv-color-act-primary-border);
|
||||
--tv-Link-primary-border-color: var(--tv-color-act-primary-border, #191919);
|
||||
// 主要链接悬浮文本色
|
||||
--tv-Link-primary-hover-text-color: var(--tv-color-text-link-1-hover);
|
||||
--tv-Link-primary-hover-text-color: var(--tv-color-text-link-1-hover, #191919);
|
||||
// 主要链接禁用文本色
|
||||
--tv-Link-primary-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-primary-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 危险链接文本色
|
||||
--tv-Link-danger-text-color: var(--tv-color-act-danger-text);
|
||||
--tv-Link-danger-text-color: var(--tv-color-act-danger-text, #f23030);
|
||||
// 危险链接悬浮下划线色
|
||||
--tv-Link-danger-border-color: var(--tv-color-act-danger-border);
|
||||
--tv-Link-danger-border-color: var(--tv-color-act-danger-border, #f23030);
|
||||
// 危险链接悬浮文本色
|
||||
--tv-Link-danger-hover-text-color: var(--tv-color-act-danger-text-hover);
|
||||
--tv-Link-danger-hover-text-color: var(--tv-color-act-danger-text-hover, #f23030);
|
||||
// 危险链接禁用文本色
|
||||
--tv-Link-danger-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-danger-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 成功链接文本色
|
||||
--tv-Link-success-text-color: var(--tv-color-success-text);
|
||||
--tv-Link-success-text-color: var(--tv-color-success-text, #5cb300);
|
||||
// 成功链接悬浮下划线色
|
||||
--tv-Link-success-border-color: var(--tv-color-success-border);
|
||||
--tv-Link-success-border-color: var(--tv-color-success-border, #5cb300);
|
||||
// 成功链接悬浮文本色
|
||||
--tv-Link-success-hover-text-color: var(--tv-color-act-success-text-hover);
|
||||
--tv-Link-success-hover-text-color: var(--tv-color-act-success-text-hover, #5cb300);
|
||||
// 成功链接禁用文本色
|
||||
--tv-Link-success-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-success-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 警告链接文本色
|
||||
--tv-Link-warning-text-color: var(--tv-color-warn-text);
|
||||
--tv-Link-warning-text-color: var(--tv-color-warn-text, #ff8800);
|
||||
// 警告链接悬浮下划线色
|
||||
--tv-Link-warning-border-color: var(--tv-color-warn-border);
|
||||
--tv-Link-warning-border-color: var(--tv-color-warn-border, #ff8800);
|
||||
// 警告链接悬浮文本色
|
||||
--tv-Link-warning-hover-text-color: var(--tv-color-act-warning-text-hover);
|
||||
--tv-Link-warning-hover-text-color: var(--tv-color-act-warning-text-hover, #ff8800);
|
||||
// 警告链接禁用文本色
|
||||
--tv-Link-warning-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-warning-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 信息链接文本色
|
||||
--tv-Link-info-text-color: var(--tv-color-act-info-text);
|
||||
--tv-Link-info-text-color: var(--tv-color-act-info-text, #1476ff);
|
||||
// 信息链接悬浮下划线色
|
||||
--tv-Link-info-border-color: var(--tv-color-info-border);
|
||||
--tv-Link-info-border-color: var(--tv-color-info-border, #1476ff);
|
||||
// 信息链接悬浮文本色
|
||||
--tv-Link-info-hover-text-color: var(--tv-color-act-info-text-hover);
|
||||
--tv-Link-info-hover-text-color: var(--tv-color-act-info-text-hover, #1476ff);
|
||||
// 信息链接禁用文本色
|
||||
--tv-Link-info-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Link-info-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 带有图标的链接悬浮文本色
|
||||
--tv-Link-has-svg-hover-text-color: var(--tv-color-text-link-hover);
|
||||
--tv-Link-has-svg-hover-text-color: var(--tv-color-text-link-hover, #1476ff);
|
||||
// SVG
|
||||
--tv-Link-svg-padding-bottom: var(--tv-space-xs);
|
||||
--tv-Link-svg-padding-bottom: var(--tv-space-xs, 2px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,43 +12,43 @@
|
|||
|
||||
.inject-Loading-vars() {
|
||||
// 加载图标色
|
||||
--tv-Loading-icon-color: var(--tv-color-icon-active);
|
||||
--tv-Loading-icon-color: var(--tv-color-icon-active, #191919);
|
||||
// 加载文本色
|
||||
--tv-Loading-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Loading-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 加载背景色
|
||||
--tv-Loading-mask-bg-color: var(--tv-color-bg-mask);
|
||||
--tv-Loading-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// 加载文本字号
|
||||
--tv-Loading-text-font-size: var(--tv-font-size-lg);
|
||||
--tv-Loading-text-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 加载图标文本垂直方向外边距
|
||||
--tv-Loading-text-margin-y: var(--tv-space-xl);
|
||||
--tv-Loading-text-margin-y: var(--tv-space-xl, 16px);
|
||||
// 加载图标文本水平方向外边距
|
||||
--tv-Loading-text-margin-x: 0;
|
||||
|
||||
// 全屏加载图标small尺寸时的宽度
|
||||
--tv-Loading-fullscreen-small-width: var(--tv-icon-size);
|
||||
--tv-Loading-fullscreen-small-width: var(--tv-icon-size, 16px);
|
||||
// 全屏加载图标medium尺寸时的宽度
|
||||
--tv-Loading-fullscreen-medium-width: var(--tv-size-height-xs);
|
||||
--tv-Loading-fullscreen-medium-width: var(--tv-size-height-xs, 24px);
|
||||
// 全屏加载图标large尺寸时的宽度
|
||||
--tv-Loading-fullscreen-large-width: var(--tv-size-height-md);
|
||||
--tv-Loading-fullscreen-large-width: var(--tv-size-height-md, 32px);
|
||||
|
||||
// 全屏加载图标small尺寸时的高度
|
||||
--tv-Loading-fullscreen-small-height: var(--tv-icon-size);
|
||||
--tv-Loading-fullscreen-small-height: var(--tv-icon-size, 16px);
|
||||
// 全屏加载图标medium尺寸时的高度
|
||||
--tv-Loading-fullscreen-medium-height: var(--tv-size-height-xs);
|
||||
--tv-Loading-fullscreen-medium-height: var(--tv-size-height-xs, 24px);
|
||||
// 全屏加载图标large尺寸时的高度
|
||||
--tv-Loading-fullscreen-large-height: var(--tv-size-height-md);
|
||||
--tv-Loading-fullscreen-large-height: var(--tv-size-height-md, 32px);
|
||||
|
||||
// 默认加载图标small尺寸时的高度
|
||||
--tv-Loading-spinner-small-height: var(--tv-icon-size);
|
||||
--tv-Loading-spinner-small-height: var(--tv-icon-size, 16px);
|
||||
// 默认加载图标medium尺寸时的高度
|
||||
--tv-Loading-spinner-medium-height: var(--tv-size-height-xs);
|
||||
--tv-Loading-spinner-medium-height: var(--tv-size-height-xs, 24px);
|
||||
// 默认加载图标large尺寸时的高度
|
||||
--tv-Loading-spinner-large-height: var(--tv-size-height-md);
|
||||
--tv-Loading-spinner-large-height: var(--tv-size-height-md, 32px);
|
||||
|
||||
// 默认加载图标small尺寸时的宽度
|
||||
--tv-Loading-spinner-small-width: var(--tv-icon-size);
|
||||
--tv-Loading-spinner-small-width: var(--tv-icon-size, 16px);
|
||||
// 默认加载图标medium尺寸时的宽度
|
||||
--tv-Loading-spinner-medium-width: var(--tv-size-height-xs);
|
||||
--tv-Loading-spinner-medium-width: var(--tv-size-height-xs, 24px);
|
||||
// 默认加载图标large尺寸时的宽度
|
||||
--tv-Loading-spinner-large-width: var(--tv-size-height-md);
|
||||
--tv-Loading-spinner-large-width: var(--tv-size-height-md, 32px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,51 +12,51 @@
|
|||
.inject-Modal-vars() {
|
||||
//---------------------------------------------------- 弹窗场景
|
||||
// 弹窗的遮罩层色
|
||||
--tv-Modal-mask-bg-color: var(--tv-color-bg-mask);
|
||||
--tv-Modal-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// Modal的行高
|
||||
--tv-Modal-line-height: var(--tv-line-height-number);
|
||||
--tv-Modal-line-height: var(--tv-line-height-number, 1.5);
|
||||
|
||||
// --------------------------------------- box 全局
|
||||
// 弹窗的默认宽度
|
||||
--tv-Modal-box-width: 400px;
|
||||
// 弹窗的背景色
|
||||
--tv-Modal-box-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Modal-box-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 弹窗的圆角
|
||||
--tv-Modal-box-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Modal-box-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 弹窗的外阴影
|
||||
--tv-Modal-box-box-shadow: var(--tv-shadow-4-down);
|
||||
--tv-Modal-box-box-shadow: var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));
|
||||
|
||||
// ---------------------------------------状态图标色
|
||||
// 成功状态时，图标的颜色
|
||||
--tv-Modal-status-icon-color-success: var(--tv-color-success-icon);
|
||||
--tv-Modal-status-icon-color-success: var(--tv-color-success-icon, #5cb300);
|
||||
// 错误状态时，图标的颜色
|
||||
--tv-Modal-status-icon-color-error: var(--tv-color-error-icon);
|
||||
--tv-Modal-status-icon-color-error: var(--tv-color-error-icon, #f23030);
|
||||
// 警告状态时，图标的颜色
|
||||
--tv-Modal-status-icon-color-warning: var(--tv-color-warn-icon);
|
||||
--tv-Modal-status-icon-color-warning: var(--tv-color-warn-icon, #ff8800);
|
||||
// 信息状态时，图标的颜色
|
||||
--tv-Modal-status-icon-color-info: var(--tv-color-info-icon);
|
||||
--tv-Modal-status-icon-color-info: var(--tv-color-info-icon, #1476ff);
|
||||
// 询问状态时，图标的颜色
|
||||
--tv-Modal-status-icon-color-question: var(--tv-color-icon-control);
|
||||
--tv-Modal-status-icon-color-question: var(--tv-color-icon-control, #191919);
|
||||
|
||||
// --------------------------------------- header【 status-icon title close-icon】
|
||||
// 弹窗头部的水平内边距
|
||||
--tv-Modal-box-header-padding-x: var(--tv-space-xxxl);
|
||||
--tv-Modal-box-header-padding-x: var(--tv-space-xxxl, 32px);
|
||||
// 弹窗头部的上内边距
|
||||
--tv-Modal-box-header-padding-top: var(--tv-space-xxxl);
|
||||
--tv-Modal-box-header-padding-top: var(--tv-space-xxxl, 32px);
|
||||
// 弹窗头部的下内边距
|
||||
--tv-Modal-box-header-padding-bottom: 24px;
|
||||
|
||||
// 弹窗头部状态图标的大小
|
||||
--tv-Modal-box-status-icon-font-size: 21px;
|
||||
// 弹窗头部状态图标的右外边距
|
||||
--tv-Modal-box-status-icon-margin-right: var(--tv-space-md);
|
||||
--tv-Modal-box-status-icon-margin-right: var(--tv-space-md, 8px);
|
||||
|
||||
// 弹窗头部标题的字体颜色
|
||||
--tv-Modal-box-title-text-color: var(--tv-color-text);
|
||||
--tv-Modal-box-title-text-color: var(--tv-color-text, #191919);
|
||||
// 弹窗头部标题的字体大小
|
||||
--tv-Modal-box-title-font-size: var(--tv-font-size-xxl);
|
||||
--tv-Modal-box-title-font-size: var(--tv-font-size-xxl, 20px);
|
||||
// 弹窗头部标题的字重
|
||||
--tv-Modal-box-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Modal-box-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
|
||||
// 弹窗头部关闭按钮的顶部距离
|
||||
--tv-Modal-box-close-icon-top: 20px;
|
||||
|
|
@ -65,59 +65,59 @@
|
|||
// 弹窗头部关闭按钮的大小
|
||||
--tv-Modal-box-close-icon-size: 24px;
|
||||
// 弹窗头部关闭按钮的颜色
|
||||
--tv-Modal-box-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Modal-box-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 弹窗头部关闭按钮的悬浮颜色
|
||||
--tv-Modal-box-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Modal-box-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
|
||||
// 弹窗头部zoom按钮的右边距离
|
||||
--tv-Modal-box-zoom-icon-right: 48px;
|
||||
// -----------------------------------------body
|
||||
// 弹窗内容区的水平内边距
|
||||
--tv-Modal-box-body-padding-x: var(--tv-space-xxxl);
|
||||
--tv-Modal-box-body-padding-x: var(--tv-space-xxxl, 32px);
|
||||
// 弹窗内容区的垂直内边距
|
||||
--tv-Modal-box-body-padding-y: 0;
|
||||
// 弹窗内容区的消息文本字体大小
|
||||
--tv-Modal-box-body-text-font-size: var(--tv-font-size-md);
|
||||
--tv-Modal-box-body-text-font-size: var(--tv-font-size-md, 14px);
|
||||
// 弹窗内容区的消息文本字体颜色
|
||||
--tv-Modal-box-body-text-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Modal-box-body-text-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// ------------------------------------------footer
|
||||
// 弹窗底部的水平内边距
|
||||
--tv-Modal-box-footer-padding-x: var(--tv-space-xxxl);
|
||||
--tv-Modal-box-footer-padding-x: var(--tv-space-xxxl, 32px);
|
||||
// 弹窗底部的上内边距
|
||||
--tv-Modal-box-footer-padding-top: 24px;
|
||||
// 弹窗底部的下内边距
|
||||
--tv-Modal-box-footer-padding-bottom: var(--tv-space-xxxl);
|
||||
--tv-Modal-box-footer-padding-bottom: var(--tv-space-xxxl, 32px);
|
||||
|
||||
// ------------------------------------- 消息场景
|
||||
// 消息的背景色
|
||||
--tv-Modal-msg-box-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Modal-msg-box-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 消息的圆角
|
||||
--tv-Modal-msg-box-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Modal-msg-box-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 消息的外阴影
|
||||
--tv-Modal-msg-box-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-Modal-msg-box-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 消息的水平内边距
|
||||
--tv-Modal-msg-box-box-padding-x: var(--tv-space-xl);
|
||||
--tv-Modal-msg-box-box-padding-x: var(--tv-space-xl, 16px);
|
||||
// 消息的垂直内边距
|
||||
--tv-Modal-msg-box-box-padding-y: var(--tv-space-lg);
|
||||
--tv-Modal-msg-box-box-padding-y: var(--tv-space-lg, 12px);
|
||||
|
||||
// 消息头部状态图标的大小
|
||||
--tv-Modal-msg-box-status-icon-size: var(--tv-icon-size);
|
||||
--tv-Modal-msg-box-status-icon-size: var(--tv-icon-size, 16px);
|
||||
// 消息头部状态图标的右外边距
|
||||
--tv-Modal-msg-box-status-icon-margin-right: var(--tv-space-md);
|
||||
--tv-Modal-msg-box-status-icon-margin-right: var(--tv-space-md, 8px);
|
||||
|
||||
// 消息的字体颜色
|
||||
--tv-Modal-msg-box-text-color: var(--tv-color-text);
|
||||
--tv-Modal-msg-box-text-color: var(--tv-color-text, #191919);
|
||||
// 消息的字体大小
|
||||
--tv-Modal-msg-box-font-size: var(--tv-font-size-default);
|
||||
--tv-Modal-msg-box-font-size: var(--tv-font-size-default, 14px);
|
||||
// 消息的字重
|
||||
--tv-Modal-msg-box-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Modal-msg-box-font-weight: var(--tv-font-weight-regular, 400);
|
||||
|
||||
// 消息关闭按钮的左外边距
|
||||
--tv-Modal-msg-box-close-icon-margin-left: var(--tv-space-lg);
|
||||
--tv-Modal-msg-box-close-icon-margin-left: var(--tv-space-lg, 12px);
|
||||
// 消息关闭按钮的大小
|
||||
--tv-Modal-msg-box-close-icon-size: var(--tv-icon-size);
|
||||
--tv-Modal-msg-box-close-icon-size: var(--tv-icon-size, 16px);
|
||||
// 消息关闭按钮的颜色
|
||||
--tv-Modal-msg-box-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Modal-msg-box-close-icon-color: var(--tv-color-icon, #808080);
|
||||
//消息关闭按钮的悬浮颜色
|
||||
--tv-Modal-msg-box-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Modal-msg-box-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,71 +14,71 @@
|
|||
// 导航菜单栏高度
|
||||
--tv-NavMenu-height: 48px;
|
||||
// 导航菜单栏背景色
|
||||
--tv-NavMenu-bg-color: var(--tv-color-bg-3);
|
||||
--tv-NavMenu-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 导航菜单栏字号
|
||||
--tv-NavMenu-item-font-size: var(--tv-font-size-default);
|
||||
--tv-NavMenu-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 单个导航菜单外边距
|
||||
--tv-NavMenu-item-li-margin: var(--tv-space-xl);
|
||||
--tv-NavMenu-item-li-margin: var(--tv-space-xl, 16px);
|
||||
// 导航菜单栏内边距
|
||||
--tv-NavMenu-padding: var(--tv-space-xl);
|
||||
--tv-NavMenu-padding: var(--tv-space-xl, 16px);
|
||||
// 导航菜单栏文本色
|
||||
--tv-NavMenu-item-text-color: var(--tv-color-text);
|
||||
--tv-NavMenu-item-text-color: var(--tv-color-text, #191919);
|
||||
// 导航菜单栏更多图标
|
||||
--tv-NavMenu-item-more-button-fill: var(--tv-color-icon-active);
|
||||
--tv-NavMenu-item-more-button-fill: var(--tv-color-icon-active, #191919);
|
||||
// 导航菜单栏选中后字体大小
|
||||
--tv-NavMenu-item-text-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-NavMenu-item-text-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 导航菜单栏项悬浮背景色
|
||||
--tv-NavMenu-item-hover-bg-color: var(--tv-color-bg-hover-secondary);
|
||||
--tv-NavMenu-item-hover-bg-color: var(--tv-color-bg-hover-secondary, #ffffff);
|
||||
// 导航菜单栏项选中下划线背景色
|
||||
--tv-NavMenu-item-selected-underline-bg-color: var(--tv-color-bg-primary);
|
||||
--tv-NavMenu-item-selected-underline-bg-color: var(--tv-color-bg-primary, #191919);
|
||||
// 导航菜单菜单栏阴影
|
||||
--tv-NavMenu-box-shadow: var(--tv-shadow-1-down);
|
||||
--tv-NavMenu-box-shadow: var(--tv-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.08));
|
||||
// 导航菜单菜单栏下拉框阴影
|
||||
--tv-NavMenu-popmenu-box-shadow: var(--tv-shadow-3-down);
|
||||
--tv-NavMenu-popmenu-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
|
||||
// 导航菜单菜单栏下拉框选中文本色
|
||||
--tv-NavMenu-popmenu-selected-text-color: var(--tv-color-text);
|
||||
--tv-NavMenu-popmenu-selected-text-color: var(--tv-color-text, #191919);
|
||||
// 导航菜单菜单栏下拉背景色
|
||||
--tv-NavMenu-popmenu-bg-color: var(--tv-color-bg-3, #fff);
|
||||
// 导航菜单菜单栏下拉框选中字重
|
||||
--tv-NavMenu-popmenu-selected-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-NavMenu-popmenu-selected-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 导航菜单菜单栏下拉框文本色
|
||||
--tv-NavMenu-popmenu-text-color: var(--tv-color-text);
|
||||
--tv-NavMenu-popmenu-text-color: var(--tv-color-text, #191919);
|
||||
// 导航菜单更多按钮展示的下拉框右边框色
|
||||
--tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border);
|
||||
--tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border, #c2c2c2);
|
||||
// 导航菜单更多按钮展示的下拉框字体大小
|
||||
--tv-NavMenu-popmenu-more-menu-font-size: var(--tv-font-size-default);
|
||||
--tv-NavMenu-popmenu-more-menu-font-size: var(--tv-font-size-default, 14px);
|
||||
// 导航菜单更多按钮展示的下拉框图标大小
|
||||
--tv-NavMenu-popmenu-more-menu-icon-size: 14px;
|
||||
// 导航菜单更多按钮展示的下拉框高度
|
||||
--tv-NavMenu-popmenu-more-item-height: 40px;
|
||||
// 导航菜单栏下拉框文字高度
|
||||
--tv-NavMenu-popmenu-text-height: var(--tv-size-height-md);
|
||||
--tv-NavMenu-popmenu-text-height: var(--tv-size-height-md, 32px);
|
||||
// 导航菜单更多按钮展示的下拉框列表项图标文本色
|
||||
--tv-NavMenu-popmenu-more-item-icon-color: var(--tv-color-icon);
|
||||
--tv-NavMenu-popmenu-more-item-icon-color: var(--tv-color-icon, #808080);
|
||||
// 导航菜单更多按钮展示的下拉框列表项文本色
|
||||
--tv-NavMenu-popmenu-more-item-text-color: var(--tv-color-text);
|
||||
--tv-NavMenu-popmenu-more-item-text-color: var(--tv-color-text, #191919);
|
||||
// 导航下拉框列表项二级菜单文本色
|
||||
--tv-NavMenu-popmenu-text-color-normal: var(--tv-color-text-secondary);
|
||||
--tv-NavMenu-popmenu-text-color-normal: var(--tv-color-text-secondary, #595959);
|
||||
// 导航菜单更多按钮展示的下拉框列表项图标悬浮文本色
|
||||
--tv-NavMenu-popmenu-more-item-hover-icon-color: var(--tv-color-icon-hover);
|
||||
--tv-NavMenu-popmenu-more-item-hover-icon-color: var(--tv-color-icon-hover, #191919);
|
||||
// 导航菜单更多按钮展示的下拉框列表项 悬浮 文本色
|
||||
--tv-NavMenu-popmenu-more-item-hover-text-color: var(--tv-color-text);
|
||||
--tv-NavMenu-popmenu-more-item-hover-text-color: var(--tv-color-text, #191919);
|
||||
// 导航菜单更多按钮展示的下拉框列表项选中背景色
|
||||
--tv-NavMenu-popmenu-more-item-selected-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-NavMenu-popmenu-more-item-selected-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 导航菜单下拉框可点选项的 悬浮 背景色
|
||||
--tv-NavMenu-popmenu-more-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-NavMenu-popmenu-more-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 导航菜单下拉框非标题选项点击瞬间背景色
|
||||
--tv-NavMenu-popmenu-more-item-active-bg-color: var(--tv-color-bg-hover-secondary);
|
||||
--tv-NavMenu-popmenu-more-item-active-bg-color: var(--tv-color-bg-hover-secondary, #ffffff);
|
||||
// 导航菜单下拉框标题字号
|
||||
--tv-NavMenu-popmenu-node-title-font-size: var(--tv-font-size-default);
|
||||
--tv-NavMenu-popmenu-node-title-font-size: var(--tv-font-size-default, 14px);
|
||||
// 导航菜单下拉框标题字号
|
||||
--tv-NavMenu-popmenu-text-font-size: var(--tv-font-size-sm);
|
||||
--tv-NavMenu-popmenu-text-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 导航菜单下拉框圆角
|
||||
--tv-NavMenu-popmenu-box-radius: var(--tv-border-radius-md);
|
||||
--tv-NavMenu-popmenu-box-radius: var(--tv-border-radius-md, 6px);
|
||||
// 导航菜单下拉框非标题项字号
|
||||
--tv-NavMenu-popmenu-node-item-font-size: var(--tv-font-size-default);
|
||||
--tv-NavMenu-popmenu-node-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 自定义 Logo颜色
|
||||
--tv-NavMenu-slot-logo-icon-color: var(--tv-color-icon-hover);
|
||||
--tv-NavMenu-slot-logo-icon-color: var(--tv-color-icon-hover, #191919);
|
||||
// 自定义 Logo大小
|
||||
--tv-NavMenu-slot-logo-icon-size: var(--tv-icon-size);
|
||||
--tv-NavMenu-slot-logo-icon-size: var(--tv-icon-size, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,48 +15,48 @@
|
|||
// 通知的行高
|
||||
--tv-Notify-max-width: 340px;
|
||||
// 通知的行高
|
||||
--tv-Notify-line-height: var(--tv-line-height-number);
|
||||
--tv-Notify-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 通知的背景色
|
||||
--tv-Notify-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Notify-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 通知的圆角
|
||||
--tv-Notify-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Notify-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 通知的外阴影
|
||||
--tv-Notify-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-Notify-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 通知的水平内边距
|
||||
--tv-Notify-padding-x: var(--tv-space-xl);
|
||||
--tv-Notify-padding-x: var(--tv-space-xl, 16px);
|
||||
// 通知的垂直内边距
|
||||
--tv-Notify-padding-y: var(--tv-space-xl);
|
||||
--tv-Notify-padding-y: var(--tv-space-xl, 16px);
|
||||
// ----------------------------------------------------------------状态图标
|
||||
// 状态图标的大小
|
||||
--tv-Notify-status-icon-font-size: 24px;
|
||||
// 消息状态图标的右外边距
|
||||
--tv-Notify-status-icon-margin-right: var(--tv-space-md);
|
||||
--tv-Notify-status-icon-margin-right: var(--tv-space-md, 8px);
|
||||
// 成功状态时，图标的颜色
|
||||
--tv-Notify-status-icon-color-success: var(--tv-color-success-icon);
|
||||
--tv-Notify-status-icon-color-success: var(--tv-color-success-icon, #5cb300);
|
||||
// 错误状态时，图标的颜色
|
||||
--tv-Notify-status-icon-color-error: var(--tv-color-error-icon);
|
||||
--tv-Notify-status-icon-color-error: var(--tv-color-error-icon, #f23030);
|
||||
// 警告状态时，图标的颜色
|
||||
--tv-Notify-status-icon-color-warning: var(--tv-color-warn-icon);
|
||||
--tv-Notify-status-icon-color-warning: var(--tv-color-warn-icon, #ff8800);
|
||||
// 信息状态时，图标的颜色
|
||||
--tv-Notify-status-icon-color-info: var(--tv-color-info-icon);
|
||||
--tv-Notify-status-icon-color-info: var(--tv-color-info-icon, #1476ff);
|
||||
|
||||
// ----------------------------------------------------------------消息区 title+message
|
||||
// 通知消息区的水平外边距
|
||||
--tv-Notify-msg-margin-x: var(--tv-space-md);
|
||||
--tv-Notify-msg-margin-x: var(--tv-space-md, 8px);
|
||||
|
||||
// 通知标题的字体颜色
|
||||
--tv-Notify-title-text-color: var(--tv-color-text);
|
||||
--tv-Notify-title-text-color: var(--tv-color-text, #191919);
|
||||
// 通知标题的字体大小
|
||||
--tv-Notify-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-Notify-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 通知标题的字重
|
||||
--tv-Notify-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Notify-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 通知标题的下边距外边距
|
||||
--tv-Notify-title-margin-bottom: var(--tv-space-md);
|
||||
--tv-Notify-title-margin-bottom: var(--tv-space-md, 8px);
|
||||
|
||||
// 通知内容的字体颜色
|
||||
--tv-Notify-msg-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Notify-msg-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 通知内容的字体大小
|
||||
--tv-Notify-msg-font-size: var(--tv-font-size-default);
|
||||
--tv-Notify-msg-font-size: var(--tv-font-size-default, 14px);
|
||||
// 通知内容的最大高度
|
||||
--tv-Notify-msg-max-height: 96px;
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
// 关闭图标的大小
|
||||
--tv-Notify-close-icon-font-size: 20px;
|
||||
// 关闭图标的颜色
|
||||
--tv-Notify-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Notify-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 关闭图标的悬浮
|
||||
--tv-Notify-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Notify-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,62 +14,62 @@
|
|||
// 默认宽度
|
||||
--tv-Numeric-input-width: 126px;
|
||||
// 默认高度
|
||||
--tv-Numeric-input-normal-height: var(--tv-size-height-md);
|
||||
--tv-Numeric-input-normal-height: var(--tv-size-height-md, 32px);
|
||||
// 边框圆角
|
||||
--tv-Numeric-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Numeric-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 边框默认色
|
||||
--tv-Numeric-input-normal-border-color: var(--tv-color-border);
|
||||
--tv-Numeric-input-normal-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 分隔线颜色
|
||||
--tv-Numeric-input-dividing-border-color: var(--tv-color-border-divider);
|
||||
--tv-Numeric-input-dividing-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 分割线高度
|
||||
--tv-Numeric-input-dividing-border-height: 20px;
|
||||
// 输入框字号
|
||||
--tv-Numeric-input-normal-font-size: var(--tv-font-size-default);
|
||||
--tv-Numeric-input-normal-font-size: var(--tv-font-size-default, 14px);
|
||||
// 输入框字体色
|
||||
--tv-Numeric-input-normal-text-color: var(--tv-color-text);
|
||||
--tv-Numeric-input-normal-text-color: var(--tv-color-text, #191919);
|
||||
// 默认背景色
|
||||
--tv-Numeric-input-normal-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Numeric-input-normal-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 按钮默认宽度
|
||||
--tv-Numeric-input-icon-width: calc(var(--tv-Numeric-input-normal-height) - 1px);
|
||||
// 悬浮边框色
|
||||
--tv-Numeric-input-normal-active-border-color: var(--tv-color-border-hover);
|
||||
--tv-Numeric-input-normal-active-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 按钮图标色
|
||||
--tv-Numeric-input-icon-color: var(--tv-color-icon);
|
||||
--tv-Numeric-input-icon-color: var(--tv-color-icon, #808080);
|
||||
// 提示占位符文本色
|
||||
--tv-Numeric-input-placeholder-text-color: var(--tv-color-text-placeholder);
|
||||
--tv-Numeric-input-placeholder-text-color: var(--tv-color-text-placeholder, #808080);
|
||||
// 按钮悬浮图标色
|
||||
--tv-Numeric-input-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Numeric-input-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 按钮禁用图标色
|
||||
--tv-Numeric-input-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Numeric-input-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 聚焦时边框色
|
||||
--tv-Numeric-input-border-color-active: var(--tv-color-border-active);
|
||||
--tv-Numeric-input-border-color-active: var(--tv-color-border-active, #191919);
|
||||
// 图标大小
|
||||
--tv-Numeric-input-icon-size: var(--tv-icon-size);
|
||||
--tv-Numeric-input-icon-size: var(--tv-icon-size, 16px);
|
||||
|
||||
// 禁用文本色
|
||||
--tv-Numeric-input-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Numeric-input-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 禁用背景色
|
||||
--tv-Numeric-input-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Numeric-input-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 禁用时边框色
|
||||
--tv-Numeric-input-border-color-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Numeric-input-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 按钮禁用时背景色
|
||||
--tv-Numeric-input-btn-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Numeric-input-btn-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
|
||||
// medium尺寸宽度
|
||||
--tv-Numeric-input-width-medium: 158px;
|
||||
// medium尺寸高度
|
||||
--tv-Numeric-input-height-medium: var(--tv-size-height-lg);
|
||||
--tv-Numeric-input-height-medium: var(--tv-size-height-lg, 40px);
|
||||
// medium尺寸按钮宽度
|
||||
--tv-Numeric-input-icon-width-medium: var(--tv-Numeric-input-height-medium);
|
||||
// medium尺寸图标大小
|
||||
--tv-Numeric-input-icon-size-medium: var(--tv-icon-size);
|
||||
--tv-Numeric-input-icon-size-medium: var(--tv-icon-size, 16px);
|
||||
// medium尺寸分割线高度
|
||||
--tv-Numeric-input-divider-height-medium: 24px;
|
||||
|
||||
// small尺寸宽度
|
||||
--tv-Numeric-input-width-small: 112px;
|
||||
// small尺寸高度
|
||||
--tv-Numeric-input-height-small: var(--tv-size-height-sm);
|
||||
--tv-Numeric-input-height-small: var(--tv-size-height-sm, 28px);
|
||||
// small尺寸按钮宽度
|
||||
--tv-Numeric-input-icon-width-small: var(--tv-Numeric-input-height-small);
|
||||
// small尺寸图标大小
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
// mini尺寸宽度
|
||||
--tv-Numeric-input-width-mini: 102px;
|
||||
// mini尺寸高度
|
||||
--tv-Numeric-input-height-mini: var(--tv-size-height-xs);
|
||||
--tv-Numeric-input-height-mini: var(--tv-size-height-xs, 24px);
|
||||
// mini尺寸按钮宽度
|
||||
--tv-Numeric-input-icon-width-mini: var(--tv-Numeric-input-height-mini);
|
||||
// mini尺寸图标大小
|
||||
|
|
@ -91,11 +91,11 @@
|
|||
// 单位内容宽度
|
||||
--tv-Numeric-input-unit-width: 50px;
|
||||
// 单位字体色
|
||||
--tv-Numeric-input-unit-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Numeric-input-unit-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 单位字号
|
||||
--tv-Numeric-input-unit-font-size: var(--tv-font-size-default);
|
||||
--tv-Numeric-input-unit-font-size: var(--tv-font-size-default, 14px);
|
||||
// 单位左边框颜色
|
||||
--tv-Numeric-input-unit-border-left-color: var(--tv-color-border);
|
||||
--tv-Numeric-input-unit-border-left-color: var(--tv-color-border, #c2c2c2);
|
||||
// 单位背景色
|
||||
--tv-Numeric-input-unit-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-Numeric-input-unit-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,49 +12,49 @@
|
|||
|
||||
.inject-Pager-vars() {
|
||||
// 分页字号
|
||||
--tv-Pager-font-size: var(--tv-font-size-default);
|
||||
--tv-Pager-font-size: var(--tv-font-size-default, 14px);
|
||||
// 分页文本色
|
||||
--tv-Pager-text-color: var(--tv-color-text);
|
||||
--tv-Pager-text-color: var(--tv-color-text, #191919);
|
||||
// 分页禁用文本色
|
||||
--tv-Pager-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Pager-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 分页二级文本颜色，页码项文本色
|
||||
--tv-Pager-text-color-secondary: var(--tv-color-text-secondary);
|
||||
--tv-Pager-text-color-secondary: var(--tv-color-text-secondary, #595959);
|
||||
// 分页图标大小
|
||||
--tv-Pager-icon-size: 16px;
|
||||
// 分页图标颜色
|
||||
--tv-Pager-icon-color: var(--tv-color-icon);
|
||||
--tv-Pager-icon-color: var(--tv-color-icon, #808080);
|
||||
// 分页图标悬浮颜色
|
||||
--tv-Pager-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Pager-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 分页图标禁用颜色
|
||||
--tv-Pager-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Pager-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 分页边框颜色
|
||||
--tv-Pager-border-color: var(--tv-color-border);
|
||||
--tv-Pager-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 分页边框悬浮颜色
|
||||
--tv-Pager-border-color-hover: var(--tv-color-border-hover);
|
||||
--tv-Pager-border-color-hover: var(--tv-color-border-hover, #191919);
|
||||
// 分页边框激活颜色
|
||||
--tv-Pager-border-color-active: var(--tv-color-border-active);
|
||||
--tv-Pager-border-color-active: var(--tv-color-border-active, #191919);
|
||||
// 分页边框禁用颜色
|
||||
--tv-Pager-border-color-disabled: var(--tv-color-border-disabled);
|
||||
--tv-Pager-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 分页悬浮背景颜色
|
||||
--tv-Pager-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Pager-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 分页禁用背景颜色
|
||||
--tv-Pager-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Pager-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 分页高度
|
||||
--tv-Pager-height: var(--tv-size-height-md);
|
||||
--tv-Pager-height: var(--tv-size-height-md, 32px);
|
||||
// 分页纵向内边距
|
||||
--tv-Pager-padding-y: var(--tv-space-md);
|
||||
--tv-Pager-padding-y: var(--tv-space-md, 8px);
|
||||
// -------mini分页相关样式-------
|
||||
// mini分页字号
|
||||
--tv-Pager-font-size-xs: var(--tv-font-size-sm);
|
||||
--tv-Pager-font-size-xs: var(--tv-font-size-sm, 12px);
|
||||
// mini分页选择框|输入框|前往按钮高度
|
||||
--tv-Pager-input-height-xs: var(--tv-size-height-xs);
|
||||
--tv-Pager-input-height-xs: var(--tv-size-height-xs, 24px);
|
||||
// 小尺寸分页页码项最小宽度
|
||||
--tv-Pager-min-width-xs: 24px;
|
||||
// -------分页页码相关样式-------
|
||||
// 分页页码选中时背景色
|
||||
--tv-Pager-page-item-bg-color-active: var(--tv-color-bg-active);
|
||||
--tv-Pager-page-item-bg-color-active: var(--tv-color-bg-active, #f5f5f5);
|
||||
// 分页页码悬浮时背景色
|
||||
--tv-Pager-page-item-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Pager-page-item-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 分页页码边框颜色
|
||||
--tv-Pager-page-item-border-color: transparent;
|
||||
// 分页页码禁用状态下边框颜色
|
||||
|
|
@ -62,49 +62,49 @@
|
|||
// 分页页码项默认悬浮边框色
|
||||
--tv-Pager-page-item-border-color-hover: transparent;
|
||||
// 分页页码项项圆角
|
||||
--tv-Pager-page-item-border-radius: var(--tv-border-radius-brand);
|
||||
--tv-Pager-page-item-border-radius: var(--tv-border-radius-brand, 999px);
|
||||
// 分页页码悬浮字重
|
||||
--tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-bold);
|
||||
--tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-bold, 600);
|
||||
// 分页页码项最小宽度
|
||||
--tv-Pager-page-item-min-width: 32px;
|
||||
// 分页页码项水平内边距
|
||||
--tv-Pager-page-item-padding-x: var(--tv-space-md);
|
||||
--tv-Pager-page-item-padding-x: var(--tv-space-md, 8px);
|
||||
// 分页页码选中文本色
|
||||
--tv-Pager-page-item-text-color-active: var(--tv-color-text-active-1);
|
||||
--tv-Pager-page-item-text-color-active: var(--tv-color-text-active-1, #191919);
|
||||
// 分页页码悬浮文本色
|
||||
--tv-Pager-page-item-text-color-hover: var(--tv-color-text);
|
||||
--tv-Pager-page-item-text-color-hover: var(--tv-color-text, #191919);
|
||||
// -------上一页、下一页相关样式-------
|
||||
// 分页前进和后退按钮悬浮背景色
|
||||
--tv-Pager-prev-next-bg-color-hover: transparent;
|
||||
// 自定义上下页按钮文本色
|
||||
--tv-Pager-custom-prev-next-text-color: var(--tv-color-text-link);
|
||||
--tv-Pager-custom-prev-next-text-color: var(--tv-color-text-link, #1476ff);
|
||||
// 分页上一页左侧外边距
|
||||
--tv-Pager-prev-margin-left: var(--tv-space-xl);
|
||||
--tv-Pager-prev-margin-left: var(--tv-space-xl, 16px);
|
||||
// 分页上一页右侧外边距
|
||||
--tv-Pager-prev-margin-right: var(--tv-space-md);
|
||||
--tv-Pager-prev-margin-right: var(--tv-space-md, 8px);
|
||||
// 分页下一页右侧外边距
|
||||
--tv-Pager-next-margin-right: 0;
|
||||
// 分页下一页左侧外边距
|
||||
--tv-Pager-next-margin-left: var(--tv-space-md);
|
||||
--tv-Pager-next-margin-left: var(--tv-space-md, 8px);
|
||||
// -------分页输入框相关样式-------
|
||||
// 分页输入框圆角
|
||||
--tv-Pager-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Pager-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 分页选择框|输入框|前往按钮高度
|
||||
--tv-Pager-input-height: var(--tv-size-height-md);
|
||||
--tv-Pager-input-height: var(--tv-size-height-md, 32px);
|
||||
// -------跳至相关样式------
|
||||
// 跳至左侧文字左侧内边距
|
||||
--tv-Pager-goto-left-padding-left: var(--tv-space-xl);
|
||||
--tv-Pager-goto-left-padding-left: var(--tv-space-xl, 16px);
|
||||
// -------分页大小下拉面板相关样式
|
||||
// 分页大小下拉图标水平内边距
|
||||
--tv-Pager-sizes-arrow-padding-x: var(--tv-space-md);
|
||||
--tv-Pager-sizes-arrow-padding-x: var(--tv-space-md, 8px);
|
||||
// 分页大小数字右侧外边距
|
||||
--tv-Pager-sizes-num-margin-right: var(--tv-space-sm);
|
||||
--tv-Pager-sizes-num-margin-right: var(--tv-space-sm, 4px);
|
||||
// 分页大小选项悬浮背景色
|
||||
--tv-Pager-sizes-popup-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-Pager-sizes-popup-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 分页大小下拉框选项选中字体颜色
|
||||
--tv-Pager-sizes-popup-text-color-active: var(--tv-color-text-active);
|
||||
--tv-Pager-sizes-popup-text-color-active: var(--tv-color-text-active, #1476ff);
|
||||
// 分页下拉项最小高度
|
||||
--tv-Pager-sizes-popup-item-height: 32px;
|
||||
// 分页下输入框背景色
|
||||
--tv-Pager-input-background: var(--tv-color-bg-3);
|
||||
--tv-Pager-input-background: var(--tv-color-bg-3, #ffffff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,33 +12,33 @@
|
|||
|
||||
.inject-PopUpload-vars() {
|
||||
// 上传按钮文字大小
|
||||
--tv-PopUpload-font-size: var(--tv-font-size-default);
|
||||
--tv-PopUpload-font-size: var(--tv-font-size-default, 14px);
|
||||
// 弹窗表格高度
|
||||
--tv-PopUpload-dialog-table-height: 280px;
|
||||
// 弹窗表格字号
|
||||
--tv-PopUpload-dialog-table-font-size: var(--tv-font-size-default);
|
||||
--tv-PopUpload-dialog-table-font-size: var(--tv-font-size-default, 14px);
|
||||
// 弹窗表格头部竖向分割线高度(new)
|
||||
--tv-PopUpload-dialog-table-line-height: 16px;
|
||||
// 弹窗表格头部高度
|
||||
--tv-PopUpload-dialog-table-header-height: var(--tv-size-height-xs);
|
||||
--tv-PopUpload-dialog-table-header-height: var(--tv-size-height-xs, 24px);
|
||||
// 弹窗表格头部文本色
|
||||
--tv-PopUpload-dialog-table-header-text-color: var(--tv-color-text);
|
||||
--tv-PopUpload-dialog-table-header-text-color: var(--tv-color-text, #191919);
|
||||
// 弹窗表格头部字重
|
||||
--tv-PopUpload-dialog-table-header-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-PopUpload-dialog-table-header-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 弹窗表格头部背景色
|
||||
--tv-PopUpload-dialog-table-header-bg-color: var(--tv-color-bg);
|
||||
--tv-PopUpload-dialog-table-header-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 弹窗表格内容item行高
|
||||
--tv-PopUpload-table-body-col-line-height: 30px;
|
||||
// 弹窗表格文本色
|
||||
--tv-PopUpload-table-body-col-color: var(--tv-color-text);
|
||||
--tv-PopUpload-table-body-col-color: var(--tv-color-text, #191919);
|
||||
// 弹窗表格内容偶数行背景色
|
||||
--tv-PopUpload-table-item-even-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-PopUpload-table-item-even-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 弹窗已上传文件的删除文本色
|
||||
--tv-PopUpload-dialog-delete-text-color: var(--tv-color-text-link);
|
||||
--tv-PopUpload-dialog-delete-text-color: var(--tv-color-text-link, #1476ff);
|
||||
// 弹窗文件列表等待上传圆圈色
|
||||
--tv-PopUpload-status-icon-border-color: var(--tv-color-border);
|
||||
--tv-PopUpload-status-icon-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 弹窗文件列表上传成功圆圈色
|
||||
--tv-PopUpload-status-success-icon-border-color: var(--tv-color-success-border);
|
||||
--tv-PopUpload-status-success-icon-border-color: var(--tv-color-success-border, #5cb300);
|
||||
// 弹窗文件列表上传失败圆圈色
|
||||
--tv-PopUpload-status-fail-icon-color: var(--tv-color-error-border);
|
||||
--tv-PopUpload-status-fail-icon-color: var(--tv-color-error-border, #f23030);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,30 +12,30 @@
|
|||
|
||||
.inject-Popconfirm-vars() {
|
||||
// 提示弹窗title字体行高
|
||||
--tv-Popconfirm-popover-title-line-height: var(--tv-line-height-number);
|
||||
--tv-Popconfirm-popover-title-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 提示弹窗content字体行高
|
||||
--tv-Popconfirm-popover-content-line-height: var(--tv-line-height-number);
|
||||
--tv-Popconfirm-popover-content-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 提示弹窗字体大小
|
||||
--tv-Popconfirm-popover-footer-font-size: var(--tv-font-size-default);
|
||||
--tv-Popconfirm-popover-footer-font-size: var(--tv-font-size-default, 14px);
|
||||
// 提示弹窗字体颜色
|
||||
--tv-Popconfirm-popover-footer-font-color: var(--tv-color-text);
|
||||
--tv-Popconfirm-popover-footer-font-color: var(--tv-color-text, #191919);
|
||||
// 提示弹窗容器垂直内边距
|
||||
--tv-Popconfirm-popover-container-padding-vertical: var(--tv-space-base);
|
||||
--tv-Popconfirm-popover-container-padding-vertical: var(--tv-space-base, 4px);
|
||||
// 提示弹窗图标外边距
|
||||
--tv-Popconfirm-popover-icon-margin-bottom: var(--tv-space-xs);
|
||||
--tv-Popconfirm-popover-icon-margin-right: var(--tv-space-base);
|
||||
--tv-Popconfirm-popover-icon-margin-bottom: var(--tv-space-xs, 2px);
|
||||
--tv-Popconfirm-popover-icon-margin-right: var(--tv-space-base, 4px);
|
||||
// 提示弹窗底部按钮容器上侧外边距
|
||||
--tv-Popconfirm-popover-footer-margin-top: var(--tv-space-xl);
|
||||
--tv-Popconfirm-popover-footer-margin-top: var(--tv-space-xl, 16px);
|
||||
// 标题字重、大小、颜色
|
||||
--tv-Popconfirm-popover-title-font-size: var(--tv-icon-size);
|
||||
--tv-Popconfirm-popover-title-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Popconfirm-popover-text-color: var(--tv-color-text);
|
||||
--tv-Popconfirm-popover-title-font-size: var(--tv-icon-size, 16px);
|
||||
--tv-Popconfirm-popover-title-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-Popconfirm-popover-text-color: var(--tv-color-text, #191919);
|
||||
// 标题距离内容下边距
|
||||
--tv-Popconfirm-popover-margin-bottom: var(--tv-space-md);
|
||||
--tv-Popconfirm-popover-confirm-button-margin-left: var(--tv-space-md);
|
||||
--tv-Popconfirm-popover-margin-bottom: var(--tv-space-md, 8px);
|
||||
--tv-Popconfirm-popover-confirm-button-margin-left: var(--tv-space-md, 8px);
|
||||
// 图标色
|
||||
--tv-Popconfirm-icon-info-fill: var(--tv-color-info-icon);
|
||||
--tv-Popconfirm-icon-error-fill: var(--tv-color-error-icon);
|
||||
--tv-Popconfirm-icon-warning-fill: var(--tv-color-warn-icon);
|
||||
--tv-Popconfirm-icon-success-fill: var(--tv-color-success-icon);
|
||||
--tv-Popconfirm-icon-info-fill: var(--tv-color-info-icon, #1476ff);
|
||||
--tv-Popconfirm-icon-error-fill: var(--tv-color-error-icon, #f23030);
|
||||
--tv-Popconfirm-icon-warning-fill: var(--tv-color-warn-icon, #ff8800);
|
||||
--tv-Popconfirm-icon-success-fill: var(--tv-color-success-icon, #5cb300);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,31 +12,31 @@
|
|||
|
||||
.inject-Popeditor-vars() {
|
||||
// 默认字号大小
|
||||
--tv-Popeditor-font-size: var(--tv-font-size-default);
|
||||
--tv-Popeditor-font-size: var(--tv-font-size-default, 14px);
|
||||
// 输入框右侧默认图标色
|
||||
--tv-Popeditor-icon-color: var(--tv-color-icon);
|
||||
--tv-Popeditor-icon-color: var(--tv-color-icon, #808080);
|
||||
// 输入框右侧禁用图标色
|
||||
--tv-Popeditor-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Popeditor-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 输入框右侧默认图标悬浮色
|
||||
--tv-Popeditor-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Popeditor-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 输入框右侧默认图标字号
|
||||
--tv-Popeditor-icon-font-size: var(--tv-icon-size);
|
||||
--tv-Popeditor-icon-font-size: var(--tv-icon-size, 16px);
|
||||
// 输入框右侧默认图标高度
|
||||
--tv-Popeditor-icon-height: var(--tv-size-height-md);
|
||||
--tv-Popeditor-icon-height: var(--tv-size-height-md, 32px);
|
||||
// 输入框右侧默认图标行高
|
||||
--tv-Popeditor-icon-line-height: var(--tv-Popeditor-icon-height);
|
||||
// 弹出框头部标题选中文本色和边框色
|
||||
--tv-Popeditor-tabs-selected-text-color: var(--tv-color-text);
|
||||
--tv-Popeditor-tabs-selected-text-color: var(--tv-color-text, #191919);
|
||||
// 弹出框头部标题高度
|
||||
--tv-Popeditor-tabs-li-height: 34px;
|
||||
// 弹出框头部标题行高
|
||||
--tv-Popeditor-tabs-li-line-height: var(--tv-line-height-number);
|
||||
--tv-Popeditor-tabs-li-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 出框头部标题字体大小
|
||||
--tv-Popeditor-tabs-font-size: var(--tv-font-size-lg);
|
||||
--tv-Popeditor-tabs-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 弹出框头部标题选中文本字重
|
||||
--tv-Popeditor-tabs-selected-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-Popeditor-tabs-selected-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 弹出编辑头部标签页文本色
|
||||
--tv-Popeditor-tabs-text-color: var(--tv-color-text);
|
||||
--tv-Popeditor-tabs-text-color: var(--tv-color-text, #191919);
|
||||
// 弹出表格搜索项左侧标签文本默认宽度
|
||||
--tv-Popeditor-search-item-width: 80px;
|
||||
// 弹出表格搜索项右侧内间距
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
|
||||
.inject-Popover-vars() {
|
||||
// 弹框背景色
|
||||
--tv-Popover-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Popover-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 弹框内容文本色
|
||||
--tv-Popover-text-color: var(--tv-color-text-secondary);
|
||||
--tv-Popover-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 弹框圆角
|
||||
--tv-Popover-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Popover-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 弹框内容字号
|
||||
--tv-Popover-font-size: var(--tv-font-size-default);
|
||||
--tv-Popover-font-size: var(--tv-font-size-default, 14px);
|
||||
// 弹框内容行高
|
||||
--tv-Popover-line-height: var(--tv-line-height-number);
|
||||
--tv-Popover-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 弹框标题文本色
|
||||
--tv-Popover-title-text-color: var(--tv-color-text);
|
||||
--tv-Popover-title-text-color: var(--tv-color-text, #191919);
|
||||
// 弹框标题字号
|
||||
--tv-Popover-title-font-size: var(--tv-font-size-lg);
|
||||
--tv-Popover-title-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 弹框标题字重
|
||||
--tv-Popover-title-weight: var(--tv-font-weight-bold);
|
||||
--tv-Popover-title-weight: var(--tv-font-weight-bold, 600);
|
||||
// 弹框阴影
|
||||
--tv-Popover-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-Popover-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 弹框垂直内边距
|
||||
--tv-Popover-padding-y: var(--tv-space-lg);
|
||||
--tv-Popover-padding-y: var(--tv-space-lg, 12px);
|
||||
// 弹框水平内边距
|
||||
--tv-Popover-padding-x: var(--tv-space-xl);
|
||||
--tv-Popover-padding-x: var(--tv-space-xl, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.inject-QrCode-vars() {
|
||||
// 二维码背景色
|
||||
--tv-QrCode-container-bg-color: var(--tv-color-bg-inverse-tint-1);
|
||||
--tv-QrCode-container-bg-color: var(--tv-color-bg-inverse-tint-1, #ffffff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@
|
|||
|
||||
.inject-RadioButton-vars() {
|
||||
// 单选框按钮文本色
|
||||
--tv-RadioButton-text-color: var(--tv-color-text);
|
||||
--tv-RadioButton-text-color: var(--tv-color-text, #191919);
|
||||
// 单选框按钮圆角
|
||||
--tv-RadioButton-border-radius: var(--tv-border-radius-md);
|
||||
--tv-RadioButton-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 单选框按钮字体大小
|
||||
--tv-RadioButton-font-size: var(--tv-font-size-default);
|
||||
--tv-RadioButton-font-size: var(--tv-font-size-default, 14px);
|
||||
// 单选框按钮背景色
|
||||
--tv-RadioButton-bg-color: var(--tv-color-bg);
|
||||
--tv-RadioButton-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 单选框按钮选中背景色
|
||||
--tv-RadioButton-checked-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-RadioButton-checked-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 单选框按钮悬浮背景色
|
||||
--tv-RadioButton-checked-hover-bg-color: var(--tv-color-bg-hover-1);
|
||||
--tv-RadioButton-checked-hover-bg-color: var(--tv-color-bg-hover-1, #deecff);
|
||||
// 单选框按钮禁用文本色
|
||||
--tv-RadioButton-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-RadioButton-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 单选框按钮选中状态禁用文本色
|
||||
--tv-RadioButton-disabled-checked-text-color: var(--tv-color-text-weaken);
|
||||
--tv-RadioButton-disabled-checked-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 单选框按钮禁用背景色
|
||||
--tv-RadioButton-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-RadioButton-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 单选框按钮选中状态禁用背景色
|
||||
--tv-RadioButton-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
|
||||
--tv-RadioButton-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked, #dbdbdb);
|
||||
// 单选框按钮中等尺寸
|
||||
--tv-RadioButton-size-height-md: var(--tv-size-height-md);
|
||||
--tv-RadioButton-size-height-md: var(--tv-size-height-md, 32px);
|
||||
// 单选框按钮小型尺寸
|
||||
--tv-RadioButton-size-height-sm: var(--tv-size-height-sm);
|
||||
--tv-RadioButton-size-height-sm: var(--tv-size-height-sm, 28px);
|
||||
// 单选框按钮超小尺寸
|
||||
--tv-RadioButton-size-height-xs: var(--tv-size-height-xs);
|
||||
--tv-RadioButton-size-height-xs: var(--tv-size-height-xs, 24px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,41 +12,41 @@
|
|||
|
||||
.inject-radio-vars() {
|
||||
// 单选框默认文本色
|
||||
--tv-Radio-text-color: var(--tv-color-text);
|
||||
--tv-Radio-text-color: var(--tv-color-text, #191919);
|
||||
// 单选框字号
|
||||
--tv-Radio-font-size: var(--tv-font-size-sm);
|
||||
--tv-Radio-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 带边框类单选框圆角
|
||||
--tv-Radio-bordered-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Radio-bordered-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 单选框默认边框色
|
||||
--tv-Radio-bordered-border-color: var(--tv-color-border);
|
||||
--tv-Radio-bordered-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 单选框默认禁用边框色
|
||||
--tv-Radio-input-disabled-border-color: var(--tv-color-border-disabled);
|
||||
--tv-Radio-input-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 单选框的选中状态时的边框色
|
||||
--tv-Radio-bordered-checked-border-color: var(--tv-color-border-active-control);
|
||||
--tv-Radio-bordered-checked-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
// 单选框的带有边框时悬浮时的边框色
|
||||
--tv-Radio-bordered-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Radio-bordered-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 单选框的带有边框时选中时的边框色
|
||||
--tv-Radio-bordered-checked-hover-border-color: var(--tv-color-border-active-control);
|
||||
--tv-Radio-bordered-checked-hover-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
// 单选框的带有边框时激活时的边框色
|
||||
--tv-Radio-bordered-active-border-color: var(--tv-color-border-active-control);
|
||||
--tv-Radio-bordered-active-border-color: var(--tv-color-border-active-control, #1476ff);
|
||||
// 单选框的禁用状态时的背景色
|
||||
--tv-Radio-input-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Radio-input-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 单选框为选中且禁用状态时的背景色
|
||||
--tv-Radio-input-checked-disabled-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Radio-input-checked-disabled-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 单选框为选中且禁用状态时的边框色
|
||||
--tv-Radio-input-checked-disabled-border-color: var(--tv-color-bg-disabled-control-checked-1); // dark: 264dab, smb: #dbdbdb
|
||||
// 单选框为输入框样式时禁用状态时的文本色
|
||||
--tv-Radio-input-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Radio-input-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 单选框单选按钮的背景色
|
||||
--tv-Radio-inner-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Radio-inner-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 单选框单选按钮选中时的背景色
|
||||
--tv-Radio-inner-checked-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-Radio-inner-checked-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 单选框单选按钮的尺寸
|
||||
--tv-Radio-inner-size: 8px;
|
||||
// 单选框单选按钮为选中且禁用状态时的背景色
|
||||
--tv-Radio-inner-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-checked-1); // dark: 264dab, smb: #dbdbdb
|
||||
// 单选框单选按钮的边框圆角半径
|
||||
--tv-Radio-inner-border-radius: var(--tv-border-radius-round);
|
||||
--tv-Radio-inner-border-radius: var(--tv-border-radius-round, 999px);
|
||||
// 单选框单选按钮宽度
|
||||
--tv-Radio-inner-width: 16px;
|
||||
// 单选框单选按钮宽度
|
||||
|
|
@ -54,5 +54,5 @@
|
|||
// 单选组每个选项之间的间距
|
||||
--tv-Radio-margin-right: 24px;
|
||||
// 单选按钮底部外边距
|
||||
--tv-Radio-button-margin-bottom: var(--tv-space-xl);
|
||||
--tv-Radio-button-margin-bottom: var(--tv-space-xl, 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.inject-Rate-vars() {
|
||||
// 图标右侧文本左外边距
|
||||
--tv-Rate-text-margin-left: var(--tv-space-lg);
|
||||
--tv-Rate-text-margin-left: var(--tv-space-lg, 12px);
|
||||
// 图标右侧文本字号
|
||||
--tv-Rate-text-font-size: var(--tv-font-size-default);
|
||||
--tv-Rate-text-font-size: var(--tv-font-size-default, 14px);
|
||||
// 图标下方提示文本字号
|
||||
--tv-Rate-bottom-font-size: var(--tv-font-size-default);
|
||||
--tv-Rate-bottom-font-size: var(--tv-font-size-default, 14px);
|
||||
// 图标下方提示文本上外边距
|
||||
--tv-Rate-bottom-margin-top: var(--tv-space-md);
|
||||
--tv-Rate-bottom-margin-top: var(--tv-space-md, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
.component-css-vars-rich-text-editor() {
|
||||
// 边框色
|
||||
--tv-RichTextEditor-border-color: var(--tv-color-border);
|
||||
--tv-RichTextEditor-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 富文本行号
|
||||
--tv-RichTextEditor-line-height: var(--tv-line-height-number);
|
||||
--tv-RichTextEditor-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 图标悬浮颜色
|
||||
--tv-RichTextEditor-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-RichTextEditor-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 图标禁用颜色
|
||||
--tv-RichTextEditor-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-RichTextEditor-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 头部图标弹出下拉框背景色
|
||||
--tv-RichTextEditor-options-bg-color: #ffffff;
|
||||
// 头部图标弹出下拉框阴影
|
||||
--tv-RichTextEditor-options-box-shadow: var(--tv-shadow-3-down);
|
||||
--tv-RichTextEditor-options-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
|
||||
// 头部图标弹出下拉框圆角
|
||||
--tv-RichTextEditor-options-border-radius: var(--tv-border-radius-md);
|
||||
--tv-RichTextEditor-options-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 头部图标弹出下拉框选项文本色
|
||||
--tv-RichTextEditor-options-text-color: var(--tv-color-text);
|
||||
--tv-RichTextEditor-options-text-color: var(--tv-color-text, #191919);
|
||||
// 头部图标弹出下拉框选项悬浮背景颜色
|
||||
--tv-RichTextEditor-options-item-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-RichTextEditor-options-item-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.inject-Roles-vars() {
|
||||
// 下拉面板选项高度
|
||||
--tv-Roles-poplist-item-height: var(--tv-size-height-md);
|
||||
--tv-Roles-poplist-item-height: var(--tv-size-height-md, 32px);
|
||||
// 下拉面板选项字体颜色
|
||||
--tv-Roles-poplist-item-text-color: var(--tv-color-text);
|
||||
--tv-Roles-poplist-item-text-color: var(--tv-color-text, #191919);
|
||||
// 下拉面板选项字体尺寸
|
||||
--tv-Roles-poplist-item-font-size: var(--tv-font-size-default);
|
||||
--tv-Roles-poplist-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 下拉面板选项悬浮背景色
|
||||
--tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
*/
|
||||
|
||||
.inject-ScrollText-vars() {
|
||||
--tv-ScrollText-height: var(--tv-size-height-xs);
|
||||
--tv-ScrollText-bg-color: var(--tv-color-bg-active-dark);
|
||||
--tv-ScrollText-height: var(--tv-size-height-xs, 24px);
|
||||
--tv-ScrollText-bg-color: var(--tv-color-bg-active-dark, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@
|
|||
|
||||
.inject-Scrollbar-vars() {
|
||||
// 垂直滚动条距离右侧距离
|
||||
--tv-Scrollbar-vertical-right: var(--tv-space-sm);
|
||||
--tv-Scrollbar-vertical-right: var(--tv-space-sm, 4px);
|
||||
// 垂直滚动条宽度
|
||||
--tv-Scrollbar-vertical-width: var(--tv-space-md);
|
||||
--tv-Scrollbar-vertical-width: var(--tv-space-md, 8px);
|
||||
// 垂直滚动条滑块背景色
|
||||
--tv-Scrollbar-thumb-bg-color: var(--tv-color-bg-scrollbar-thumb);
|
||||
--tv-Scrollbar-thumb-bg-color: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
|
||||
// 垂直滚动条滑块悬浮时背景色
|
||||
--tv-Scrollbar-thumb-hover-bg-color: var(--tv-color-bg-scrollbar-thumb-hover);
|
||||
--tv-Scrollbar-thumb-hover-bg-color: var(--tv-color-bg-scrollbar-thumb-hover, #dbdbdb);
|
||||
// 垂直滚动条滑块圆角
|
||||
--tv-Scrollbar-thumb-border-radius: var(--tv-border-radius-scrollbar-thumb);
|
||||
--tv-Scrollbar-thumb-border-radius: var(--tv-border-radius-scrollbar-thumb, 4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,59 +12,59 @@
|
|||
|
||||
.inject-Search-vars() {
|
||||
// 搜索框字号
|
||||
--tv-Search-font-size: var(--tv-font-size-default);
|
||||
--tv-Search-font-size: var(--tv-font-size-default, 14px);
|
||||
// 搜索框高度
|
||||
--tv-Search-input-height: var(--tv-size-height-md);
|
||||
--tv-Search-input-height: var(--tv-size-height-md, 32px);
|
||||
// 搜索框左内边距
|
||||
--tv-Search-input-padding-left: var(--tv-space-lg);
|
||||
--tv-Search-input-padding-left: var(--tv-space-lg, 12px);
|
||||
// 搜索框边框色
|
||||
--tv-Search-input-border-color: var(--tv-color-border);
|
||||
--tv-Search-input-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 搜索框聚焦时边框色
|
||||
--tv-Search-input-focus-border-color: var(--tv-color-border-active);
|
||||
--tv-Search-input-focus-border-color: var(--tv-color-border-active, #191919);
|
||||
// 搜索框圆角
|
||||
--tv-Search-input-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Search-input-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 搜索框文本色
|
||||
--tv-Search-input-text-color: var(--tv-color-text);
|
||||
--tv-Search-input-text-color: var(--tv-color-text, #191919);
|
||||
// 文本禁用色
|
||||
--tv-Search-input-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Search-input-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 搜索框默认背景色
|
||||
--tv-Search-input-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Search-input-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 输入框提示占位文本色
|
||||
--tv-Search-input-placeholder-color: var(--tv-color-text-placeholder);
|
||||
--tv-Search-input-placeholder-color: var(--tv-color-text-placeholder, #808080);
|
||||
// 搜索按钮图标色
|
||||
--tv-Search-input-btn-icon-color: var(--tv-color-icon);
|
||||
--tv-Search-input-btn-icon-color: var(--tv-color-icon, #808080);
|
||||
// 图标禁用色
|
||||
--tv-Search-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Search-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 背景禁用色
|
||||
--tv-Search-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Search-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 搜索按钮悬浮图标色
|
||||
--tv-Search-input-btn-hover-icon-color: var(--tv-color-icon-hover);
|
||||
--tv-Search-input-btn-hover-icon-color: var(--tv-color-icon-hover, #191919);
|
||||
// 搜索按钮图标尺寸
|
||||
--tv-Search-input-btn-icon-size: var(--tv-icon-size);
|
||||
--tv-Search-input-btn-icon-size: var(--tv-icon-size, 16px);
|
||||
// 迷你模式搜索图标色|下拉箭头图标色
|
||||
--tv-Search-icon-color: var(--tv-color-icon);
|
||||
--tv-Search-icon-color: var(--tv-color-icon, #808080);
|
||||
// 迷你搜索框宽度
|
||||
--tv-Search-mini-width: var(--tv-Search-input-height);
|
||||
// 迷你模式搜索按钮悬浮边框色
|
||||
--tv-Search-line-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Search-line-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 分类搜索宽度
|
||||
--tv-Search-selector-width: 80px;
|
||||
// 下拉按钮和下拉框文本色
|
||||
--tv-Search-selector-text-color: var(--tv-color-text);
|
||||
--tv-Search-selector-text-color: var(--tv-color-text, #191919);
|
||||
// 搜索下拉框圆角
|
||||
--tv-Search-selector-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Search-selector-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 搜索下拉框背景色
|
||||
--tv-Search-selector-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Search-selector-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 搜索下拉框阴影
|
||||
--tv-Search-selector-box-shadow: var(--tv-shadow-3-down);
|
||||
--tv-Search-selector-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
|
||||
// 搜索下拉框最小宽度
|
||||
--tv-Search-selector-box-min-width: 80px;
|
||||
// 搜索下拉框上外边距
|
||||
--tv-Search-selector-margin-top: 4px;
|
||||
// 搜索下拉框选项高度
|
||||
--tv-Search-selector-list-height: var(--tv-size-height-md);
|
||||
--tv-Search-selector-list-height: var(--tv-size-height-md, 32px);
|
||||
// 下拉框选项悬浮背景色
|
||||
--tv-Search-list-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Search-list-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 搜索下拉框选项水平内边距
|
||||
--tv-Search-selector-list-padding-x: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.inject-SkeletonItem-vars() {
|
||||
// 骨架屏元素背景设置
|
||||
--tv-SkeletonItem-bg-color: var(--tv-color-bg);
|
||||
--tv-SkeletonItem-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 骨架屏元素半径设置
|
||||
--tv-SkeletonItem-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-SkeletonItem-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 图片颜色设置
|
||||
--tv-SkeletonItem-image-icon-color: var(--tv-color-bg);
|
||||
--tv-SkeletonItem-image-icon-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 方形高度设置
|
||||
--tv-SkeletonItem-square-height: var(--tv-size-height-sm);
|
||||
--tv-SkeletonItem-square-height: var(--tv-size-height-sm, 28px);
|
||||
// 圆角半径设置
|
||||
--tv-SkeletonItem-circle-border-radius: var(--tv-border-radius-round);
|
||||
--tv-SkeletonItem-circle-border-radius: var(--tv-border-radius-round, 999px);
|
||||
// 圆形中大尺寸
|
||||
--tv-SkeletonItem-circle-large-size: 60px;
|
||||
// 圆形中尺寸设置
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
// 大图片宽度设置
|
||||
--tv-SkeletonItem-image-large-size-width: 200px;
|
||||
// 渐变颜色设置(hide)
|
||||
--tv-SkeletonItem-linear-gradient: linear-gradient(to right, var(--tv-color-bg-hover), var(--tv-color-border-container), var(--tv-color-bg-hover));
|
||||
--tv-SkeletonItem-linear-gradient: linear-gradient(to right, var(--tv-color-bg-hover, #f5f5f5), var(--tv-color-border-container, #f0f0f0), var(--tv-color-bg-hover, #f5f5f5));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,89 +12,89 @@
|
|||
|
||||
.inject-Slider-vars() {
|
||||
// 字号大小
|
||||
--tv-Slider-font-size: var(--tv-font-size-default);
|
||||
--tv-Slider-font-size: var(--tv-font-size-default, 14px);
|
||||
// 滑块线条默认背景色
|
||||
--tv-Slider-bg-color: var(--tv-color-bg);
|
||||
--tv-Slider-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 滑块线条禁用背景色
|
||||
--tv-Slider-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Slider-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 滑块线条高度
|
||||
--tv-Slider-height: 8px;
|
||||
// 滑块行高
|
||||
--tv-Slider-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 滑块线条圆角
|
||||
--tv-Slider-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Slider-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
|
||||
// 滑块进度条已完成部分的高度
|
||||
--tv-Slider-range-height: 8px;
|
||||
// 横向滑块进度条圆角
|
||||
--tv-Slider-range-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Slider-range-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 滑块进度条背景色
|
||||
--tv-Slider-range-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-Slider-range-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 滑块进度条悬浮背景色
|
||||
--tv-Slider-range-hover-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-Slider-range-hover-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 滑块提示框top
|
||||
--tv-Slider-range-top: -4px;
|
||||
// 滑块进度条禁用时背景色
|
||||
--tv-Slider-range-disabled-bg-color: var(--tv-color-bg-disabled-control);
|
||||
--tv-Slider-range-disabled-bg-color: var(--tv-color-bg-disabled-control, #c2c2c2);
|
||||
|
||||
// 滑块点宽度
|
||||
--tv-Slider-handle-width: 24px;
|
||||
// 滑块点高度
|
||||
--tv-Slider-handle-height: 24px;
|
||||
// 滑块点背景色
|
||||
--tv-Slider-handle-bg-color: var(--tv-color-bg-inverse);
|
||||
--tv-Slider-handle-bg-color: var(--tv-color-bg-inverse, #ffffff);
|
||||
// 滑块点禁用色
|
||||
--tv-Slider-handle-bg-color-disabled: var(--tv-color-bg-inverse-disabled);
|
||||
--tv-Slider-handle-bg-color-disabled: var(--tv-color-bg-inverse-disabled, #ffffff);
|
||||
// 滑块点边框色
|
||||
--tv-Slider-handle-border-color: var(--tv-color-border-1);
|
||||
--tv-Slider-handle-border-color: var(--tv-color-border-1, #dbdbdb);
|
||||
// 滑块点圆角
|
||||
--tv-Slider-handle-border-radius: var(--tv-border-radius-round);
|
||||
--tv-Slider-handle-border-radius: var(--tv-border-radius-round, 999px);
|
||||
|
||||
// 滑块点悬浮文本色
|
||||
--tv-Slider-handle-text-color-hover: var(--tv-color-text-secondary);
|
||||
--tv-Slider-handle-text-color-hover: var(--tv-color-text-secondary, #595959);
|
||||
// 滑块点悬浮边框色
|
||||
--tv-Slider-handle-border-color-hover: var(--tv-color-border-active-control);
|
||||
--tv-Slider-handle-border-color-hover: var(--tv-color-border-active-control, #1476ff);
|
||||
// 滑块点阴影
|
||||
--tv-Slider-handle-box-shadow: var(--tv-shadow-1-down);
|
||||
--tv-Slider-handle-box-shadow: var(--tv-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.08));
|
||||
|
||||
// 滑块输入框高度
|
||||
--tv-Slider-input-height: var(--tv-size-height-md);
|
||||
--tv-Slider-input-height: var(--tv-size-height-md, 32px);
|
||||
// 滑块输入框宽度
|
||||
--tv-Slider-input-width: 80px;
|
||||
// 滑块输入框边框圆角
|
||||
--tv-Slider-input-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Slider-input-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 滑块输入框边框色
|
||||
--tv-Slider-input-border-color: var(--tv-color-border);
|
||||
--tv-Slider-input-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 滑块输入框文本色
|
||||
--tv-Slider-input-text-color: var(--tv-color-text);
|
||||
--tv-Slider-input-text-color: var(--tv-color-text, #191919);
|
||||
// 滑块输入框背景色
|
||||
--tv-Slider-input-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Slider-input-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 滑块输入框左边外间距
|
||||
--tv-Slider-input-margin-left: var(--tv-space-xl);
|
||||
--tv-Slider-input-margin-left: var(--tv-space-xl, 16px);
|
||||
// 滑块输入框单位左边padding
|
||||
--tv-Slider-input-unit-margin-left: var(--tv-space-sm);
|
||||
--tv-Slider-input-unit-margin-left: var(--tv-space-sm, 4px);
|
||||
// 滑块输入框单位文本色
|
||||
--tv-Slider-input-unit-text-color: var(--tv-color-text);
|
||||
--tv-Slider-input-unit-text-color: var(--tv-color-text, #191919);
|
||||
// 滑块输入框单位禁用文本色
|
||||
--tv-Slider-input-unit-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Slider-input-unit-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
|
||||
// 滑块刻度背景色
|
||||
--tv-Slider-mark-point-bg-color: var(--tv-color-bg-3);
|
||||
--tv-Slider-mark-point-bg-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 滑块刻度文本色
|
||||
--tv-Slider-mark-label-text-color: var(--tv-color-text-weaken);
|
||||
--tv-Slider-mark-label-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 滑块刻度字号
|
||||
--tv-Slider-mark-label-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 滑块刻度文本顶部外间距
|
||||
--tv-Slider-mark-label-margin-top: var(--tv-space-lg, 12px);
|
||||
|
||||
// 滑块活动时提示框背景色
|
||||
--tv-Slider-tips-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Slider-tips-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 滑块活动时提示框边框圆角
|
||||
--tv-Slider-tips-border-radius: var(--tv-border-radius-xs);
|
||||
--tv-Slider-tips-border-radius: var(--tv-border-radius-xs, 2px);
|
||||
// 滑块活动时提示框边框色
|
||||
--tv-Slider-tips-border-color: var(--tv-Slider-tips-bg-color);
|
||||
// 滑块活动时提示框文本色
|
||||
--tv-Slider-tips-text-color: var(--tv-color-text);
|
||||
--tv-Slider-tips-text-color: var(--tv-color-text, #191919);
|
||||
// 滑块提示框阴影
|
||||
--tv-Slider-tips-box-shadow: var(--tv-shadow-3-down);
|
||||
--tv-Slider-tips-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
|
||||
.inject-Split-vars() {
|
||||
// 面板边框色
|
||||
--tv-Split-wrapper-border-color: var(--tv-color-border);
|
||||
--tv-Split-wrapper-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 面板分割线触发源图标线条色
|
||||
--tv-Split-trigger-icon-line-color: var(--tv-color-icon);
|
||||
--tv-Split-trigger-icon-line-color: var(--tv-color-icon, #808080);
|
||||
// 面板分割线触发源图标线条悬浮色
|
||||
--tv-Split-trigger-icon-line-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Split-trigger-icon-line-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 面板边框圆角尺寸
|
||||
--tv-Split-wrapper-radius-size: var(--tv-border-radius-lg);
|
||||
--tv-Split-wrapper-radius-size: var(--tv-border-radius-lg, 8px);
|
||||
// 简易模式分割线hover颜色
|
||||
--tv-Split-trigger-line-bg-hover: var(--tv-color-border-active-control);
|
||||
--tv-Split-trigger-line-bg-hover: var(--tv-color-border-active-control, #1476ff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.inject-Statistic-vars() {
|
||||
// 标题字体大小
|
||||
--tv-Statistic-font-size: var(--tv-font-size-default);
|
||||
--tv-Statistic-font-size: var(--tv-font-size-default, 14px);
|
||||
// 后缀字体大小
|
||||
--tv-Statistic-suffix-font-size: var(--tv-font-size-sm);
|
||||
--tv-Statistic-suffix-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 标题内容字体大小
|
||||
--tv-Statistic-title-font-size: var(--tv-font-size-heading-xl);
|
||||
--tv-Statistic-title-font-size: var(--tv-font-size-heading-xl, 32px);
|
||||
// 标题字体颜色
|
||||
--tv-Statistic-font-color: var(--tv-color-text);
|
||||
--tv-Statistic-font-color: var(--tv-color-text, #191919);
|
||||
// 标题字体粗细
|
||||
--tv-Statistic-title-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Statistic-title-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 标题上间距
|
||||
--tv-Statistic-title-margin-top: 20px;
|
||||
// 描述下间距
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
// 标题下间距
|
||||
--tv-Statistic-title-margin-bottom: 20px;
|
||||
// 标题行高
|
||||
--tv-Statistic-title-line-height: var(--tv-line-height-number);
|
||||
--tv-Statistic-title-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 前缀插槽字体粗细
|
||||
--tv-Statistic-font-weight: 500;
|
||||
// 前缀字体粗细
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
// 后缀字体粗细
|
||||
--tv-Statistic-suffix-font-weight: 500;
|
||||
// 数字内容字体粗细
|
||||
--tv-Statistic-description-font-weight: var(--tv-font-weight-regular);
|
||||
--tv-Statistic-description-font-weight: var(--tv-font-weight-regular, 400);
|
||||
// 数字内容字体
|
||||
--tv-Statistic-description-font-size: var(--tv-font-size-heading-lg);
|
||||
--tv-Statistic-description-font-size: var(--tv-font-size-heading-lg, 24px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@
|
|||
// 竖式步骤条线条左间距
|
||||
--tv-Steps-timeline-vertical-line-margin-left: var(--tv-space-xl, 16px);
|
||||
// 竖式步骤条节点内容底部内边距
|
||||
--tv-Steps-timeline-item-padding-bottom: var(--tv-space-xxl);
|
||||
--tv-Steps-timeline-item-padding-bottom: var(--tv-space-xxl, 24px);
|
||||
// 竖式步骤条圆点尺寸
|
||||
--tv-Steps-timeline-dot-width: 8px;
|
||||
// 竖式步骤条圆点边框色
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
|
||||
.inject-Switch-vars() {
|
||||
// 开关开启状态背景色
|
||||
--tv-Switch-on-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-Switch-on-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 开关关闭状态背景色
|
||||
--tv-Switch-off-bg-color: var(--tv-color-bg-control-unactive);
|
||||
--tv-Switch-off-bg-color: var(--tv-color-bg-control-unactive, #c2c2c2);
|
||||
// 开关关闭禁用状态背景色
|
||||
--tv-Switch-disabled-bg-color: var(--tv-color-bg-disabled-control-unactive);
|
||||
--tv-Switch-disabled-bg-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
|
||||
// 开关开启禁用状态背景色
|
||||
--tv-Switch-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-active, #AEAEAE);
|
||||
// 开关禁用状态文本色
|
||||
--tv-Switch-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Switch-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 开关禁用状态圆点色
|
||||
--tv-Switch-disabled-dot-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Switch-disabled-dot-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 开关默认圆点色
|
||||
--tv-Switch-dot-bg-color: var(--tv-color-bg-inverse);
|
||||
--tv-Switch-dot-bg-color: var(--tv-color-bg-inverse, #ffffff);
|
||||
// 开关圆点尺寸
|
||||
--tv-Switch-dot-size: 16px;
|
||||
// 开关圆点左边距(hide)
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
// 开关圆点偏移量(hide)
|
||||
--tv-Switch-dot-offset: calc(var(--tv-Switch-dot-size) + 2px);
|
||||
// 开关文本色
|
||||
--tv-Switch-text-color: var(--tv-color-text-inverse);
|
||||
--tv-Switch-text-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// 默认开关宽度
|
||||
--tv-Switch-width: 40px;
|
||||
// 开关高度
|
||||
|
|
@ -42,9 +42,9 @@
|
|||
// 开关圆角
|
||||
--tv-Switch-border-radius: 15px;
|
||||
// 开关字号
|
||||
--tv-Switch-inner-font-size: var(--tv-font-size-sm);
|
||||
--tv-Switch-inner-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 开关内部button圆角
|
||||
--tv-Switch-inner-border-radius: var(--tv-border-radius-round);
|
||||
--tv-Switch-inner-border-radius: var(--tv-border-radius-round, 999px);
|
||||
// 自定义文本开关宽度
|
||||
--tv-Switch-text-width: 46px;
|
||||
// mini尺寸高度
|
||||
|
|
@ -58,13 +58,13 @@
|
|||
// mini尺寸内部button宽度度
|
||||
--tv-Switch-mini-button-left: 18px;
|
||||
// 开启loading字体大小
|
||||
--tv-Switch-on-loading-font-size: var(--tv-font-size-sm);
|
||||
--tv-Switch-on-loading-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 开启loading图标填充色
|
||||
--tv-Switch-on-loading-fill: var(--tv-color-bg-disabled-control-active, #AEAEAE);
|
||||
// 关闭loading字体大小
|
||||
--tv-Switch-off-loading-font-size: var(--tv-font-size-sm);
|
||||
--tv-Switch-off-loading-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 关闭loading图标填充色
|
||||
--tv-Switch-off-loading-fill: var(--tv-color-bg-disabled-control-unactive);
|
||||
--tv-Switch-off-loading-fill: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
|
||||
// mini尺寸loading大小
|
||||
--tv-Switch-loading-mini-font-size: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,27 +12,27 @@
|
|||
|
||||
.inject-Table-vars() {
|
||||
// 表格字体颜色
|
||||
--tv-Table-text-color: var(--tv-color-text);
|
||||
--tv-Table-text-color: var(--tv-color-text, #191919);
|
||||
// 表格背景颜色
|
||||
--tv-Table-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Table-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 表格行悬浮背景颜色
|
||||
--tv-Table-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-Table-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 表格行禁用文本色
|
||||
--tv-Table-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Table-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 表格行禁用背景色
|
||||
--tv-Table-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Table-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 表格无数据字体颜色
|
||||
--tv-Table-nodata-text-color: var(--tv-color-text-weaken);
|
||||
--tv-Table-nodata-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 表格单元格高度
|
||||
--tv-Table-td-height: var(--tv-size-height-lg);
|
||||
--tv-Table-td-height: var(--tv-size-height-lg, 40px);
|
||||
// 表格单元格字体大小
|
||||
--tv-Table-td-font-size: var(--tv-font-size-default);
|
||||
--tv-Table-td-font-size: var(--tv-font-size-default, 14px);
|
||||
// 表格边框颜色
|
||||
--tv-Table-border-color: var(--tv-color-border);
|
||||
--tv-Table-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 表头背景颜色
|
||||
--tv-Table-thead-bg-color: var(--tv-color-bg-header);
|
||||
--tv-Table-thead-bg-color: var(--tv-color-bg-header, #f5f5f5);
|
||||
// 表格图标字体大小
|
||||
--tv-Table-icon-font-size: var(--tv-font-size-lg);
|
||||
--tv-Table-icon-font-size: var(--tv-font-size-lg, 16px);
|
||||
// 表格复选框选中图标颜色
|
||||
--tv-Table-check-icon-color: var(--tv-color-icon-control-active);
|
||||
--tv-Table-check-icon-color: var(--tv-color-icon-control-active, #1476ff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
.inject-TagGroup-vars() {
|
||||
// -----------------------------------------------排列布局场景
|
||||
// 标签组的底部外间距
|
||||
--tv-TagGroup-margin-bottom: var(--tv-space-lg);
|
||||
--tv-TagGroup-margin-bottom: var(--tv-space-lg, 12px);
|
||||
// 标签组的子项的间距
|
||||
--tv-TagGroup-item-margin-right: var(--tv-space-md);
|
||||
--tv-TagGroup-item-margin-right: var(--tv-space-md, 8px);
|
||||
// 标签组的子项的间距
|
||||
--tv-TagGroup-item-margin-bottom: var(--tv-space-md);
|
||||
--tv-TagGroup-item-margin-bottom: var(--tv-space-md, 8px);
|
||||
|
||||
// -----------------------------------------------更多的场景
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.inject-Tag-vars() {
|
||||
//-------------------------------------------------------全局场景：------------------------------------------
|
||||
// 标签字体的行高
|
||||
--tv-Tag-line-height: var(--tv-line-height-number);
|
||||
--tv-Tag-line-height: var(--tv-line-height-number, 1.5);
|
||||
|
||||
//------------------------------------------------------- 尺寸 场景：font-size, border-radius ,padding-x,y -------
|
||||
|
||||
|
|
@ -22,52 +22,52 @@
|
|||
*/
|
||||
|
||||
// 超小标签字号
|
||||
--tv-Tag-font-size-mini: var(--tv-font-size-sm);
|
||||
--tv-Tag-font-size-mini: var(--tv-font-size-sm, 12px);
|
||||
// 超小标签水平间距
|
||||
--tv-Tag-padding-x-mini: 3px;
|
||||
// 超小标签垂直间距
|
||||
--tv-Tag-padding-y-mini: 0;
|
||||
// 超小标签圆角
|
||||
--tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
|
||||
--tv-Tag-border-radius-mini: var(--tv-border-radius-xs, 2px);
|
||||
// 标签在仅图标模式时，图标的大小
|
||||
--tv-Tag-only-icon-font-size-mini: 12px;
|
||||
// 标签在仅图标模式时，标签的内边距
|
||||
--tv-Tag-only-icon-padding-mini: 2px;
|
||||
|
||||
// 小型标签字号
|
||||
--tv-Tag-font-size-small: var(--tv-font-size-sm);
|
||||
--tv-Tag-font-size-small: var(--tv-font-size-sm, 12px);
|
||||
// 小型标签水平间距
|
||||
--tv-Tag-padding-x-small: 3px;
|
||||
// 小型标签垂直间距
|
||||
--tv-Tag-padding-y-small: 0;
|
||||
// 小型标签圆角
|
||||
--tv-Tag-border-radius-small: var(--tv-border-radius-xs);
|
||||
--tv-Tag-border-radius-small: var(--tv-border-radius-xs, 2px);
|
||||
// 标签在仅图标模式时，图标的大小
|
||||
--tv-Tag-only-icon-font-size-small: 12px;
|
||||
// 标签在仅图标模式时，标签的内边距
|
||||
--tv-Tag-only-icon-padding-small: 2px;
|
||||
|
||||
// 默认标签字号
|
||||
--tv-Tag-font-size: var(--tv-font-size-sm);
|
||||
--tv-Tag-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 默认标签水平间距
|
||||
--tv-Tag-padding-x: 7px;
|
||||
// 默认标签垂直间距
|
||||
--tv-Tag-padding-y: 2px;
|
||||
// 默认标签圆角
|
||||
--tv-Tag-border-radius: var(--tv-border-radius-sm);
|
||||
--tv-Tag-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 标签在仅图标模式时，图标的大小
|
||||
--tv-Tag-only-icon-font-size: 14px;
|
||||
// 标签在仅图标模式时，标签的内边距
|
||||
--tv-Tag-only-icon-padding: 4px;
|
||||
|
||||
// 中等标签字号
|
||||
--tv-Tag-font-size-medium: var(--tv-font-size-default);
|
||||
--tv-Tag-font-size-medium: var(--tv-font-size-default, 14px);
|
||||
// 中等标签水平间距
|
||||
--tv-Tag-padding-x-medium: 11px;
|
||||
// 中等标签垂直间距
|
||||
--tv-Tag-padding-y-medium: 4.5px;
|
||||
// 中等标签圆角
|
||||
--tv-Tag-border-radius-medium: var(--tv-border-radius-md);
|
||||
--tv-Tag-border-radius-medium: var(--tv-border-radius-md, 6px);
|
||||
// 标签在仅图标模式时，图标的大小
|
||||
--tv-Tag-only-icon-font-size-medium: 16px;
|
||||
// 标签在仅图标模式时，标签的内边距
|
||||
|
|
@ -77,99 +77,99 @@
|
|||
|
||||
// type × effect的 场景： default success,danger ,warning,info light,dark,plain
|
||||
// 默认标签light的文本色
|
||||
--tv-Tag-text-color-light: var(--tv-color-text);
|
||||
--tv-Tag-text-color-light: var(--tv-color-text, #191919);
|
||||
// 默认标签light的背景色
|
||||
--tv-Tag-bg-color-light: var(--tv-color-bg);
|
||||
--tv-Tag-bg-color-light: var(--tv-color-bg, #f5f5f5);
|
||||
// 默认标签light的边框色
|
||||
--tv-Tag-border-color-light: var(--tv-color-bg); // 规范不需要边框
|
||||
--tv-Tag-border-color-light: var(--tv-color-bg, #f5f5f5); // 规范不需要边框
|
||||
// 默认标签dark的文本色
|
||||
--tv-Tag-text-color-dark: var(--tv-color-text-inverse-tint);
|
||||
--tv-Tag-text-color-dark: var(--tv-color-text-inverse-tint, #ffffff);
|
||||
// 默认标签dark的背景色
|
||||
--tv-Tag-bg-color-dark: var(--tv-color-bg-primary);
|
||||
--tv-Tag-bg-color-dark: var(--tv-color-bg-primary, #191919);
|
||||
// 默认标签dark的边框色
|
||||
--tv-Tag-border-color-dark: var(--tv-color-bg-primary);
|
||||
--tv-Tag-border-color-dark: var(--tv-color-bg-primary, #191919);
|
||||
// 默认标签plain的文本色
|
||||
--tv-Tag-text-color-plain: var(--tv-color-text);
|
||||
--tv-Tag-text-color-plain: var(--tv-color-text, #191919);
|
||||
// 默认标签plain的背景色
|
||||
--tv-Tag-bg-color-plain: transparent;
|
||||
// 默认标签plain的边框色
|
||||
--tv-Tag-border-color-plain: var(--tv-color-border-hover); // 没有正确的边框色
|
||||
--tv-Tag-border-color-plain: var(--tv-color-border-hover, #191919); // 没有正确的边框色
|
||||
|
||||
// success 主题时标签light的文本色
|
||||
--tv-Tag-text-color-light-success: var(--tv-color-success-text);
|
||||
--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);
|
||||
--tv-Tag-bg-color-light-success: var(--tv-color-success-bg-light, #e6f2d5);
|
||||
// success 主题时标签light的边框色
|
||||
--tv-Tag-border-color-light-success: var(--tv-color-success-border-light);
|
||||
--tv-Tag-border-color-light-success: var(--tv-color-success-border-light, #e6f2d5);
|
||||
// success 主题时标签dark的文本色
|
||||
--tv-Tag-text-color-dark-success: var(--tv-color-success-text-white);
|
||||
--tv-Tag-text-color-dark-success: var(--tv-color-success-text-white, #ffffff);
|
||||
// success 主题时标签dark的背景色
|
||||
--tv-Tag-bg-color-dark-success: var(--tv-color-success-bg);
|
||||
--tv-Tag-bg-color-dark-success: var(--tv-color-success-bg, #5cb300);
|
||||
// success 主题时标签dark的边框色
|
||||
--tv-Tag-border-color-dark-success: var(--tv-color-success-bg);
|
||||
--tv-Tag-border-color-dark-success: var(--tv-color-success-bg, #5cb300);
|
||||
// success 主题时标签plain的文本色
|
||||
--tv-Tag-text-color-plain-success: var(--tv-color-success-text);
|
||||
--tv-Tag-text-color-plain-success: var(--tv-color-success-text, #5cb300);
|
||||
// success 主题时标签plain的背景色
|
||||
--tv-Tag-bg-color-plain-success: transparent;
|
||||
// success 主题时标签plain的边框色
|
||||
--tv-Tag-border-color-plain-success: var(--tv-color-success-border);
|
||||
--tv-Tag-border-color-plain-success: var(--tv-color-success-border, #5cb300);
|
||||
|
||||
// error 主题时标签light的文本色
|
||||
--tv-Tag-text-color-light-danger: var(--tv-color-error-text);
|
||||
--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);
|
||||
--tv-Tag-bg-color-light-danger: var(--tv-color-error-bg-light, #fce3e1);
|
||||
// error 主题时标签light的边框色
|
||||
--tv-Tag-border-color-light-danger: var(--tv-color-error-border-light);
|
||||
--tv-Tag-border-color-light-danger: var(--tv-color-error-border-light, #fce3e1);
|
||||
// error 主题时标签dark的文本色
|
||||
--tv-Tag-text-color-dark-danger: var(--tv-color-error-text-white);
|
||||
--tv-Tag-text-color-dark-danger: var(--tv-color-error-text-white, #ffffff);
|
||||
// error 主题时标签dark的背景色
|
||||
--tv-Tag-bg-color-dark-danger: var(--tv-color-error-bg);
|
||||
--tv-Tag-bg-color-dark-danger: var(--tv-color-error-bg, #f23030);
|
||||
// error 主题时标签dark的边框色
|
||||
--tv-Tag-border-color-dark-danger: var(--tv-color-error-border);
|
||||
--tv-Tag-border-color-dark-danger: var(--tv-color-error-border, #f23030);
|
||||
// error 主题时标签plain的文本色
|
||||
--tv-Tag-text-color-plain-danger: var(--tv-color-error-text);
|
||||
--tv-Tag-text-color-plain-danger: var(--tv-color-error-text, #f23030);
|
||||
// error 主题时标签plain的背景色
|
||||
--tv-Tag-bg-color-plain-danger: transparent;
|
||||
// error 主题时标签plain的边框色
|
||||
--tv-Tag-border-color-plain-danger: var(--tv-color-error-border);
|
||||
--tv-Tag-border-color-plain-danger: var(--tv-color-error-border, #f23030);
|
||||
|
||||
// warning 主题时标签light的文本色
|
||||
--tv-Tag-text-color-light-warning: var(--tv-color-warn-text);
|
||||
--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);
|
||||
--tv-Tag-bg-color-light-warning: var(--tv-color-warn-bg-light, #ffebd1);
|
||||
// warning 主题时标签light的边框色
|
||||
--tv-Tag-border-color-light-warning: var(--tv-color-warn-border-light);
|
||||
--tv-Tag-border-color-light-warning: var(--tv-color-warn-border-light, #ffebd1);
|
||||
// warning 主题时标签dark的文本色
|
||||
--tv-Tag-text-color-dark-warning: var(--tv-color-warn-text-white);
|
||||
--tv-Tag-text-color-dark-warning: var(--tv-color-warn-text-white, #ffffff);
|
||||
// warning 主题时标签dark的背景色
|
||||
--tv-Tag-bg-color-dark-warning: var(--tv-color-warn-bg);
|
||||
--tv-Tag-bg-color-dark-warning: var(--tv-color-warn-bg, #ff8800);
|
||||
// warning 主题时标签dark的边框色
|
||||
--tv-Tag-border-color-dark-warning: var(--tv-color-warn-border);
|
||||
--tv-Tag-border-color-dark-warning: var(--tv-color-warn-border, #ff8800);
|
||||
// warning 主题时标签plain的文本色
|
||||
--tv-Tag-text-color-plain-warning: var(--tv-color-warn-text);
|
||||
--tv-Tag-text-color-plain-warning: var(--tv-color-warn-text, #ff8800);
|
||||
// warning 主题时标签plain的背景色
|
||||
--tv-Tag-bg-color-plain-warning: transparent;
|
||||
// warning 主题时标签plain的边框色
|
||||
--tv-Tag-border-color-plain-warning: var(--tv-color-warn-border);
|
||||
--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);
|
||||
--tv-Tag-text-color-light-info: var(--tv-color-info-text, #1476ff);
|
||||
// info 主题时标签light的背景色
|
||||
--tv-Tag-bg-color-light-info: var(--tv-color-info-bg-light);
|
||||
--tv-Tag-bg-color-light-info: var(--tv-color-info-bg-light, #deecff);
|
||||
// info 主题时标签light的边框色
|
||||
--tv-Tag-border-color-light-info: var(--tv-color-info-border-light);
|
||||
--tv-Tag-border-color-light-info: var(--tv-color-info-border-light, #deecff);
|
||||
// info 主题时标签dark的文本色
|
||||
--tv-Tag-text-color-dark-info: var(--tv-color-info-bg-white);
|
||||
--tv-Tag-text-color-dark-info: var(--tv-color-info-bg-white, #ffffff);
|
||||
// info 主题时标签dark的背景色
|
||||
--tv-Tag-bg-color-dark-info: var(--tv-color-info-bg);
|
||||
--tv-Tag-bg-color-dark-info: var(--tv-color-info-bg, #1476ff);
|
||||
// info 主题时标签dark的边框色
|
||||
--tv-Tag-border-color-dark-info: var(--tv-color-info-border);
|
||||
--tv-Tag-border-color-dark-info: var(--tv-color-info-border, #1476ff);
|
||||
// info 主题时标签plain的文本色
|
||||
--tv-Tag-text-color-plain-info: var(--tv-color-info-text);
|
||||
--tv-Tag-text-color-plain-info: var(--tv-color-info-text, #1476ff);
|
||||
// info 主题时标签plain的背景色
|
||||
--tv-Tag-bg-color-plain-info: transparent;
|
||||
// info 主题时标签plain的边框色
|
||||
--tv-Tag-border-color-plain-info: var(--tv-color-info-border);
|
||||
--tv-Tag-border-color-plain-info: var(--tv-color-info-border, #1476ff);
|
||||
|
||||
// color 场景：'red orange green blue purple brown grey gold' 规范变化时，也不需要变更的变量
|
||||
// 红色时标签文本色
|
||||
|
|
@ -206,23 +206,23 @@
|
|||
--tv-Tag-bg-color-gold: linear-gradient(to right, #e8cda4, #f8eddb);
|
||||
// disabled 场景：
|
||||
// 标签禁用时的文本色
|
||||
--tv-Tag-text-color-disabled: var(--tv-color-text-disabled);
|
||||
--tv-Tag-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 标签禁用时的背景色
|
||||
--tv-Tag-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
--tv-Tag-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
|
||||
//------------------------------------------------------- 关闭图标 场景：-----------------------------------
|
||||
// 标签的关闭按钮大小
|
||||
--tv-Tag-close-icon-size: var(--tv-icon-size);
|
||||
--tv-Tag-close-icon-size: var(--tv-icon-size, 16px);
|
||||
// 标签的关闭按钮的颜色
|
||||
--tv-Tag-close-icon-color: var(--tv-color-icon);
|
||||
--tv-Tag-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 标签的关闭按钮的悬浮颜色
|
||||
--tv-Tag-close-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-Tag-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 标签的关闭按钮的禁用颜色
|
||||
--tv-Tag-close-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-Tag-close-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
// 标签的关闭按钮的左外边距
|
||||
--tv-Tag-close-icon-margin-left: var(--tv-space-sm);
|
||||
--tv-Tag-close-icon-margin-left: var(--tv-space-sm, 4px);
|
||||
|
||||
//------------------------------------------------------- 其它 场景：-----------------------------------
|
||||
// 标签插槽有前置图标时，图标的右间距
|
||||
--tv-Tag-slot-icon-margin-right: var(--tv-space-sm);
|
||||
--tv-Tag-slot-icon-margin-right: var(--tv-space-sm, 4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
|
||||
.inject-TallStorage-vars() {
|
||||
// 背景颜色
|
||||
--tv-TallStorage-bg-color: var(--tv-color-bg-2);
|
||||
--tv-TallStorage-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 圆角
|
||||
--tv-TallStorage-border-radius: var(--tv-border-radius-md);
|
||||
--tv-TallStorage-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 选项高度
|
||||
--tv-TallStorage-item-height: var(--tv-size-height-md);
|
||||
--tv-TallStorage-item-height: var(--tv-size-height-md, 32px);
|
||||
// 选项悬浮背景颜色
|
||||
--tv-TallStorage-item-bg-color-hover: var(--tv-color-bg-hover);
|
||||
--tv-TallStorage-item-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 阴影
|
||||
--tv-TallStorage-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-TallStorage-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@
|
|||
|
||||
.inject-TextPopup-vars() {
|
||||
// 输入框圆角
|
||||
--tv-TextPopup-border-radius: var(--tv-border-radius-md);
|
||||
--tv-TextPopup-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 输入框高度
|
||||
--tv-TextPopup-height: var(--tv-size-height-md);
|
||||
--tv-TextPopup-height: var(--tv-size-height-md, 32px);
|
||||
// 输入框字号
|
||||
--tv-TextPopup-font-size: var(--tv-font-size-default);
|
||||
--tv-TextPopup-font-size: var(--tv-font-size-default, 14px);
|
||||
// 输入框边框色
|
||||
--tv-TextPopup-border-color: var(--tv-color-border);
|
||||
--tv-TextPopup-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 输入框边背景色
|
||||
--tv-TextPopup-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-TextPopup-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 输入框边文字颜色
|
||||
--tv-TextPopup-text-color: var(--tv-color-text);
|
||||
--tv-TextPopup-text-color: var(--tv-color-text, #191919);
|
||||
// 输入框聚焦展开时阴影
|
||||
--tv-TextPopup-box-shadow: var(--tv-shadow-1);
|
||||
--tv-TextPopup-box-shadow: var(--tv-shadow-1, 0 0 0 0 rgba(0, 0, 0, 0));
|
||||
// 输入框悬浮边框色
|
||||
--tv-TextPopup-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-TextPopup-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
//输入框聚焦边框色
|
||||
--tv-TextPopup-focus-border-color: var(--tv-color-border-active);
|
||||
--tv-TextPopup-focus-border-color: var(--tv-color-border-active, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,55 +12,55 @@
|
|||
|
||||
.inject-Textarea-vars() {
|
||||
// 文本域文本颜色
|
||||
--tv-Textarea-text-color: var(--tv-color-text);
|
||||
--tv-Textarea-text-color: var(--tv-color-text, #191919);
|
||||
// 文本域超出更多按钮文本颜色
|
||||
--tv-Textarea-more-btn-text-color: var(--tv-color-text-link);
|
||||
--tv-Textarea-more-btn-text-color: var(--tv-color-text-link, #1476ff);
|
||||
// 文本域背景颜色
|
||||
--tv-Textarea-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Textarea-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 文本域字体大小
|
||||
--tv-Textarea-font-size: var(--tv-font-size-default);
|
||||
--tv-Textarea-font-size: var(--tv-font-size-default, 14px);
|
||||
// 文本域计数器字体大小
|
||||
--tv-Textarea-count-font-size: var(--tv-font-size-sm);
|
||||
--tv-Textarea-count-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 文本域高度
|
||||
--tv-Textarea-height: var(--tv-size-height-md);
|
||||
--tv-Textarea-height: var(--tv-size-height-md, 32px);
|
||||
// 文本域边框圆角
|
||||
--tv-Textarea-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Textarea-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 文本域边框色
|
||||
--tv-Textarea-border-color: var(--tv-color-border);
|
||||
--tv-Textarea-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 文本域内层hover时显示的边框颜色
|
||||
--tv-Textarea-inner-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Textarea-inner-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 文本域内层active时显示的边框颜色
|
||||
--tv-Textarea-inner-active-border-color: var(--tv-color-border-active);
|
||||
--tv-Textarea-inner-active-border-color: var(--tv-color-border-active, #191919);
|
||||
// 文本域占位符文本颜色
|
||||
--tv-Textarea-placeholder-text-color: var(--tv-color-text-placeholder);
|
||||
--tv-Textarea-placeholder-text-color: var(--tv-color-text-placeholder, #808080);
|
||||
// 文本域disabled时的文本颜色
|
||||
--tv-Textarea-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-Textarea-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 文本域disabled时的边框颜色
|
||||
--tv-Textarea-disabled-border-color: var(--tv-color-border-disabled);
|
||||
--tv-Textarea-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
|
||||
// 文本域disabled时的背景颜色
|
||||
--tv-Textarea-disabled-bg-color: var(--tv-color-bg-disabled);
|
||||
--tv-Textarea-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
|
||||
// 文本域exceed时的文本颜色
|
||||
--tv-Textarea-exceed-text-color: var(--tv-color-error-text);
|
||||
--tv-Textarea-exceed-text-color: var(--tv-color-error-text, #f23030);
|
||||
// 计数器的颜色
|
||||
--tv-Textarea-count-color: var(--tv-color-text-weaken);
|
||||
--tv-Textarea-count-color: var(--tv-color-text-weaken, #808080);
|
||||
// 文本框垂直方向内边距
|
||||
--tv-Textarea-padding-y: var(--tv-space-md);
|
||||
--tv-Textarea-padding-y: var(--tv-space-md, 8px);
|
||||
// 文本框水平方向内边距
|
||||
--tv-Textarea-padding-x: var(--tv-space-lg);
|
||||
--tv-Textarea-padding-x: var(--tv-space-lg, 12px);
|
||||
// 文本框右侧内边距
|
||||
--tv-Textarea-padding-right: var(--tv-space-sm);
|
||||
--tv-Textarea-padding-right: var(--tv-space-sm, 4px);
|
||||
// 文本框底部内边距
|
||||
--tv-Textarea-padding-bottom: var(--tv-space-xl);
|
||||
--tv-Textarea-padding-bottom: var(--tv-space-xl, 16px);
|
||||
// 计数器右侧距离
|
||||
--tv-Textarea-count-right: var(--tv-space-xl);
|
||||
--tv-Textarea-count-right: var(--tv-space-xl, 16px);
|
||||
// 文本域active时显示的边框颜色
|
||||
--tv-Textarea-active-border-color: var(--tv-color-border-active);
|
||||
--tv-Textarea-active-border-color: var(--tv-color-border-active, #191919);
|
||||
// 计数器圆角
|
||||
--tv-Textarea-count-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Textarea-count-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 计数器文本字数颜色
|
||||
--tv-Textarea-count-text-length-color: var(--tv-color-text);
|
||||
--tv-Textarea-count-text-length-color: var(--tv-color-text, #191919);
|
||||
// 计数器右侧内边距
|
||||
--tv-Textarea-count-padding-right: var(--tv-space-sm);
|
||||
--tv-Textarea-count-padding-right: var(--tv-space-sm, 4px);
|
||||
// 计数器行高
|
||||
--tv-Textarea-count-line-height: var(--tv-Textarea-count-font-size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
|
||||
.inject-TimeSelect-vars() {
|
||||
// 时间选择选项字体色
|
||||
--tv-TimeSelect-item-text-color: var(--tv-color-text);
|
||||
--tv-TimeSelect-item-text-color: var(--tv-color-text, #191919);
|
||||
// 时间选择选项字号
|
||||
--tv-TimeSelect-item-font-size: var(--tv-font-size-default);
|
||||
--tv-TimeSelect-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 时间选择选项左右内边距
|
||||
--tv-TimeSelect-item-padding-horizontal: var(--tv-space-xl);
|
||||
--tv-TimeSelect-item-padding-horizontal: var(--tv-space-xl, 16px);
|
||||
// 选项禁用文本色
|
||||
--tv-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 选项悬浮背景色
|
||||
--tv-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 选中项字体色
|
||||
--tv-TimeSelect-item-selected-text-color: var(--tv-color-text-active);
|
||||
--tv-TimeSelect-item-selected-text-color: var(--tv-color-text-active, #1476ff);
|
||||
// 面板高度
|
||||
--tv-TimeSelect-content-padding-top: var(--tv-space-md);
|
||||
--tv-TimeSelect-content-padding-top: var(--tv-space-md, 8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
// 时间项圆角
|
||||
--tv-TimeSpinner-item-border-radius: var(--tv-border-radius-brand, 999px);
|
||||
// 时间项背景色（悬浮）
|
||||
--tv-TimeSpinner-item-bg-color-hover: var(--tv-color-bg-hover-3);
|
||||
--tv-TimeSpinner-item-bg-color-hover: var(--tv-color-bg-hover-3, #deecff);
|
||||
// 时间项背景色（选中/激活）
|
||||
--tv-TimeSpinner-item-bg-color-active: var(--tv-color-bg-active-emphasize, #deecff);
|
||||
// 时间项背景色（禁用）
|
||||
|
|
|
|||
|
|
@ -14,25 +14,25 @@
|
|||
// 收缩菜单宽度
|
||||
--tv-ToggleMenu-width: 200px;
|
||||
// 收缩菜单字号
|
||||
--tv-ToggleMenu-font-size: var(--tv-font-size-default);
|
||||
--tv-ToggleMenu-font-size: var(--tv-font-size-default, 14px);
|
||||
// 收缩菜单列表文本色
|
||||
--tv-ToggleMenu-name-text-color: var(--tv-color-text);
|
||||
--tv-ToggleMenu-name-text-color: var(--tv-color-text, #191919);
|
||||
// 收缩菜单列表项高度
|
||||
--tv-ToggleMenu-tree-node-height: 32px;
|
||||
// 收缩菜单收缩搜索高度
|
||||
--tv-ToggleMenu-filter-search-size: 28px;
|
||||
// 收缩菜单输入框搜索图标尺寸
|
||||
--tv-ToggleMenu-filter-search-svg-size: var(--tv-icon-size);
|
||||
--tv-ToggleMenu-filter-search-svg-size: var(--tv-icon-size, 16px);
|
||||
// 收缩菜单搜索图标色
|
||||
--tv-ToggleMenu-filter-search-icon-color: var(--tv-color-icon);
|
||||
--tv-ToggleMenu-filter-search-icon-color: var(--tv-color-icon, #808080);
|
||||
// 收缩菜单收缩图标色
|
||||
--tv-ToggleMenu-toggle-icon-color: var(--tv-color-icon);
|
||||
--tv-ToggleMenu-toggle-icon-color: var(--tv-color-icon, #808080);
|
||||
// 收缩菜单收缩图标悬浮色
|
||||
--tv-ToggleMenu-toggle-icon-color-hover: var(--tv-color-icon-hover);
|
||||
--tv-ToggleMenu-toggle-icon-color-hover: var(--tv-color-icon-hover, #191919);
|
||||
// 收缩菜单收缩按钮背景色
|
||||
--tv-ToggleMenu-toggle-bg-color: var(--tv-color-bg-gray-2);
|
||||
--tv-ToggleMenu-toggle-bg-color: var(--tv-color-bg-gray-2, #e6e6e6);
|
||||
// 收缩菜单选中字重色
|
||||
--tv-ToggleMenu-toggle-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-ToggleMenu-toggle-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 收缩菜单收缩标签悬浮背景色
|
||||
--tv-ToggleMenu-toggle-bg-hover-color: var(--tv-color-bg-hover);
|
||||
--tv-ToggleMenu-toggle-bg-hover-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,69 +12,69 @@
|
|||
|
||||
.inject-Tooltip-vars() {
|
||||
// 弹框字体行高
|
||||
--tv-Tooltip-popper-font-line-height: var(--tv-line-height-number);
|
||||
--tv-Tooltip-popper-font-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 悬浮弹出框圆角
|
||||
--tv-Tooltip-popper-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-Tooltip-popper-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 悬浮弹出框字号
|
||||
--tv-Tooltip-popper-font-size: var(--tv-font-size-default);
|
||||
--tv-Tooltip-popper-font-size: var(--tv-font-size-default, 14px);
|
||||
|
||||
// 正常背景色
|
||||
--tv-Tooltip-popper-normal-bg-color: var(--tv-color-bg-2);
|
||||
--tv-Tooltip-popper-normal-bg-color: var(--tv-color-bg-2, #ffffff);
|
||||
// 文字提示正常文本色(hide)
|
||||
--tv-Tooltip-popper-normal-text-color: var(--tv-color-text);
|
||||
--tv-Tooltip-popper-normal-text-color: var(--tv-color-text, #191919);
|
||||
// 弹框正常边框色 (hide)
|
||||
--tv-Tooltip-popper-normal-border-color: var(--tv-Tooltip-popper-normal-bg-color);
|
||||
|
||||
// info类型弹框背景色
|
||||
--tv-Tooltip-popper-info-bg-color: var(--tv-color-info-bg);
|
||||
--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);
|
||||
--tv-Tooltip-popper-info-text-color: var(--tv-color-info-text-white, #ffffff);
|
||||
// info类型弹框三角边框色
|
||||
--tv-Tooltip-popper-info-border-color: var(--tv-color-info-border);
|
||||
--tv-Tooltip-popper-info-border-color: var(--tv-color-info-border, #1476ff);
|
||||
|
||||
// error类型弹框背景色
|
||||
--tv-Tooltip-popper-error-bg-color: var(--tv-color-error-bg);
|
||||
--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);
|
||||
--tv-Tooltip-popper-error-text-color: var(--tv-color-error-text-white, #ffffff);
|
||||
// error类型弹框三角边框色
|
||||
--tv-Tooltip-popper-error-border-color: var(--tv-color-error-border);
|
||||
--tv-Tooltip-popper-error-border-color: var(--tv-color-error-border, #f23030);
|
||||
|
||||
// warning类型弹框背景色
|
||||
--tv-Tooltip-popper-warning-bg-color: var(--tv-color-warn-bg);
|
||||
--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);
|
||||
--tv-Tooltip-popper-warning-text-color: var(--tv-color-warn-text-white, #ffffff);
|
||||
// warning类型弹框三角边框色
|
||||
--tv-Tooltip-popper-warning-border-color: var(--tv-color-warn-border);
|
||||
--tv-Tooltip-popper-warning-border-color: var(--tv-color-warn-border, #ff8800);
|
||||
|
||||
// success类型弹框背景色
|
||||
--tv-Tooltip-popper-success-bg-color: var(--tv-color-success-bg);
|
||||
--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);
|
||||
--tv-Tooltip-popper-success-text-color: var(--tv-color-success-text-white, #ffffff);
|
||||
// success类型弹框三角边框色
|
||||
--tv-Tooltip-popper-success-border-color: var(--tv-color-success-border);
|
||||
--tv-Tooltip-popper-success-border-color: var(--tv-color-success-border, #5cb300);
|
||||
|
||||
// dark主题弹框背景色
|
||||
--tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-dark);
|
||||
--tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-dark, #191919);
|
||||
// dark主题弹框文本色
|
||||
--tv-Tooltip-popper-dark-text-color: var(--tv-color-text-inverse);
|
||||
--tv-Tooltip-popper-dark-text-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// dark主题|禁用时弹框边框色
|
||||
--tv-Tooltip-popper-dark-border-color: var(--tv-color-border-hover);
|
||||
--tv-Tooltip-popper-dark-border-color: var(--tv-color-border-hover, #191919);
|
||||
|
||||
// light主题弹框背景色
|
||||
--tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-inverse);
|
||||
--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);
|
||||
--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);
|
||||
|
||||
// 弹框阴影
|
||||
--tv-Tooltip-box-shadow: var(--tv-shadow-2-down);
|
||||
--tv-Tooltip-box-shadow: var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));
|
||||
// 弹框垂直内边距
|
||||
--tv-Tooltip-padding-y: var(--tv-space-lg);
|
||||
--tv-Tooltip-padding-y: var(--tv-space-lg, 12px);
|
||||
// 弹框水平内边距
|
||||
--tv-Tooltip-padding-x: var(--tv-space-xl);
|
||||
--tv-Tooltip-padding-x: var(--tv-space-xl, 16px);
|
||||
// 文字提示错误图标色
|
||||
--tv-Tooltip-validate-icon-color: var(--tv-color-error-icon);
|
||||
--tv-Tooltip-validate-icon-color: var(--tv-color-error-icon, #f23030);
|
||||
// 文本内容容器最大高度
|
||||
--tv-Tooltip-content-max-height: 50vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
*/
|
||||
|
||||
.inject-TopBox-vars() {
|
||||
--tv-TopBox-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-TopBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
--tv-TopBox-icon-font-size: 24px;
|
||||
--tv-TopBox-success-icon-color: var(--tv-color-success-icon);
|
||||
--tv-TopBox-error-icon-color: var(--tv-color-error-icon);
|
||||
--tv-TopBox-warning-icon-color: var(--tv-color-warn-icon);
|
||||
--tv-TopBox-help-icon-color: var(--tv-color-icon-control);
|
||||
--tv-TopBox-info-icon-color: var(--tv-color-info-icon);
|
||||
--tv-TopBox-success-icon-color: var(--tv-color-success-icon, #5cb300);
|
||||
--tv-TopBox-error-icon-color: var(--tv-color-error-icon, #f23030);
|
||||
--tv-TopBox-warning-icon-color: var(--tv-color-warn-icon, #ff8800);
|
||||
--tv-TopBox-help-icon-color: var(--tv-color-icon-control, #191919);
|
||||
--tv-TopBox-info-icon-color: var(--tv-color-info-icon, #1476ff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,15 +46,15 @@
|
|||
// 按钮底部外边距
|
||||
--tv-Transfer-button-margin-bottom: 0;
|
||||
// 按钮背景色
|
||||
--tv-Transfer-button-bg-color: var(--tv-color-bg-active-control);
|
||||
--tv-Transfer-button-bg-color: var(--tv-color-bg-active-control, #1476ff);
|
||||
// 按钮左侧内边距
|
||||
--tv-Transfer-button-padding-left: var(--tv-space-xs);
|
||||
--tv-Transfer-button-padding-left: var(--tv-space-xs, 2px);
|
||||
// 按钮右侧内边距
|
||||
--tv-Transfer-button-padding-right: var(--tv-space-xs);
|
||||
--tv-Transfer-button-padding-right: var(--tv-space-xs, 2px);
|
||||
// 按钮顶部内边距
|
||||
--tv-Transfer-button-padding-top: var(--tv-space-xs);
|
||||
--tv-Transfer-button-padding-top: var(--tv-space-xs, 2px);
|
||||
// 按钮底部内边距
|
||||
--tv-Transfer-button-padding-bottom: var(--tv-space-xs);
|
||||
--tv-Transfer-button-padding-bottom: var(--tv-space-xs, 2px);
|
||||
// 按钮圆角
|
||||
--tv-Transfer-button-border-radius: var(--tv-border-radius-sm, 4px);
|
||||
// 按钮禁用时文本色
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
// 面板悬浮时背景色
|
||||
--tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 面板选中时背景色
|
||||
--tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light);
|
||||
--tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light, #f0f7ff);
|
||||
// 面板搜索框高度
|
||||
--tv-Transfer-panel-filter-height: 32px;
|
||||
// 面板搜索框字体大小
|
||||
|
|
|
|||
|
|
@ -14,71 +14,71 @@
|
|||
// 宽度
|
||||
--tv-TreeMenu-width: 220px;
|
||||
// 节点高度
|
||||
--tv-TreeMenu-node-height: var(--tv-size-height-md);
|
||||
--tv-TreeMenu-node-height: var(--tv-size-height-md, 32px);
|
||||
// 节点高度直接距离
|
||||
--tv-TreeMenu-node-margin-bottom: var(--tv-space-base);
|
||||
--tv-TreeMenu-node-margin-bottom: var(--tv-space-base, 4px);
|
||||
// 空数据显示文本字号(hide)
|
||||
--tv-TreeMenu-font-size: var(--tv-font-size-default);
|
||||
--tv-TreeMenu-font-size: var(--tv-font-size-default, 14px);
|
||||
// 边框色
|
||||
--tv-TreeMenu-border-color: var(--tv-color-border-divider);
|
||||
--tv-TreeMenu-border-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
// 节点水平内边距
|
||||
--tv-TreeMenu-node-body-text-padding-x: 0;
|
||||
// 选中节点的背景色
|
||||
--tv-TreeMenu-node-selected-bg-color: var(--tv-color-bg-active);
|
||||
--tv-TreeMenu-node-selected-bg-color: var(--tv-color-bg-active, #f5f5f5);
|
||||
// 选中节点左边框色
|
||||
--tv-TreeMenu-square-left-border-color: var(--tv-color-border-active);
|
||||
--tv-TreeMenu-square-left-border-color: var(--tv-color-border-active, #191919);
|
||||
// 未选中节点文本色
|
||||
--tv-TreeMenu-node-body-text-color: var(--tv-color-text-control);
|
||||
--tv-TreeMenu-node-body-text-color: var(--tv-color-text-control, #191919);
|
||||
// 节点悬浮背景色
|
||||
--tv-TreeMenu-node-hover-bg-color: var(--tv-color-bg-hover);
|
||||
--tv-TreeMenu-node-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 折叠图标颜色
|
||||
--tv-TreeMenu-collapse-icon-fill-color: var(--tv-color-icon);
|
||||
--tv-TreeMenu-collapse-icon-fill-color: var(--tv-color-icon, #808080);
|
||||
// 底部折叠按钮
|
||||
--tv-TreeMenu-collapse-icon-hover-color: var(--tv-color-icon-hover);
|
||||
--tv-TreeMenu-collapse-icon-hover-color: var(--tv-color-icon-hover, #191919);
|
||||
// 折叠图标右边距
|
||||
--tv-TreeMenu-collapse-icon-margin-right: 20px;
|
||||
// 输入框下面的线
|
||||
--tv-TreeMenu-border-top-color: var(--tv-color-border-divider);
|
||||
--tv-TreeMenu-border-top-color: var(--tv-color-border-divider, #f0f0f0);
|
||||
//输入框距离由边的距离
|
||||
--tv-TreeMenu-input-padding-right: var(--tv-space-xxxl);
|
||||
--tv-TreeMenu-input-padding-right: var(--tv-space-xxxl, 32px);
|
||||
//选中后左边宽度
|
||||
--tv-TreeMenu-node-content-height: var(--tv-space-xxxl);
|
||||
--tv-TreeMenu-node-content-height: var(--tv-space-xxxl, 32px);
|
||||
//输入框底下的线的定位top
|
||||
--tv-TreeMenu-input-before-top: 48px;
|
||||
//输入框底下的线距离由边的距离
|
||||
--tv-TreeMenu-input-before-margin-right: var(--tv-space-xxxl);
|
||||
--tv-TreeMenu-input-before-margin-right: var(--tv-space-xxxl, 32px);
|
||||
// 节点序号字号
|
||||
--tv-TreeMenu-node-number-font-size: var(--tv-font-size-sm);
|
||||
--tv-TreeMenu-node-number-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 节点序号定位
|
||||
--tv-TreeMenu-node-number-right: var(--tv-space-xl);
|
||||
--tv-TreeMenu-node-number-right: var(--tv-space-xl, 16px);
|
||||
// 节点序号最大宽度
|
||||
--tv-TreeMenu-node-number-max-width: 36px;
|
||||
// 活跃节点竖线与文本的间距
|
||||
--tv-TreeMenu-node-vertical-line-margin-right: var(--tv-space-xl);
|
||||
--tv-TreeMenu-node-vertical-line-margin-right: var(--tv-space-xl, 16px);
|
||||
// 输入框与文本的间距
|
||||
--tv-TreeMenu-input-margin: var(--tv-space-xl) 0 var(--tv-space-xl) var(--tv-space-xl);
|
||||
--tv-TreeMenu-input-margin: var(--tv-space-xl, 16px) 0 var(--tv-space-xl, 16px) var(--tv-space-xl, 16px);
|
||||
// 输入框与内容区域的间距
|
||||
--tv-TreeMenu-padding-top: var(--tv-space-md);
|
||||
--tv-TreeMenu-padding-top: var(--tv-space-md, 8px);
|
||||
// 前缀图标右边距
|
||||
--tv-TreeMenu-prefix-icon-margin-right: var(--tv-space-md);
|
||||
--tv-TreeMenu-prefix-icon-margin-right: var(--tv-space-md, 8px);
|
||||
// 禁用文本色
|
||||
--tv-TreeMenu-disabled-text-color: var(--tv-color-text-disabled);
|
||||
--tv-TreeMenu-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
// 切换图标大小
|
||||
--tv-TreeMenu-expand-icon-size: 14px;
|
||||
// 数字文本色
|
||||
--tv-TreeMenu-node-number-color: var(--tv-color-text-weaken);
|
||||
--tv-TreeMenu-node-number-color: var(--tv-color-text-weaken, #808080);
|
||||
// 背景色
|
||||
--tv-TreeMenu-background-color: var(--tv-color-bg-3);
|
||||
--tv-TreeMenu-background-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 滑动块的宽度
|
||||
--tv-TreeMenu-scrollbar-width: var(--tv-space-md);
|
||||
--tv-TreeMenu-scrollbar-width: var(--tv-space-md, 8px);
|
||||
// 滑动块右侧的外边距
|
||||
--tv-TreeMenu-scrollbar-margin-right: var(--tv-space-base);
|
||||
--tv-TreeMenu-scrollbar-margin-right: var(--tv-space-base, 4px);
|
||||
// 名称hover文字字重
|
||||
--tv-TreeMenu-node-name-hover-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-TreeMenu-node-name-hover-font-weight: var(--tv-font-weight-bold, 600);
|
||||
// 左侧折叠图标背景色
|
||||
--tv-TreeMenu-toggle-button-background-color: var(--tv-color-bg-3);
|
||||
--tv-TreeMenu-toggle-button-background-color: var(--tv-color-bg-3, #ffffff);
|
||||
// 选中字体颜色
|
||||
--tv-TreeMenu-node-body-selected-color: var(--tv-color-border-active);
|
||||
--tv-TreeMenu-node-body-selected-color: var(--tv-color-border-active, #191919);
|
||||
// hover字体颜色
|
||||
--tv-TreeMenu-node-name-hover-color: var(--tv-color-border-hover);
|
||||
--tv-TreeMenu-node-name-hover-color: var(--tv-color-border-hover, #191919);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
// 节点左内边距
|
||||
--tv-Tree-node-padding-left: var(--tv-space-xl, 16px);
|
||||
// 节点高亮背景色
|
||||
--tv-Tree-node-highlight-bg-color: var(--tv-color-bg-active);
|
||||
--tv-Tree-node-highlight-bg-color: var(--tv-color-bg-active, #f5f5f5);
|
||||
// 节点内容高度
|
||||
--tv-Tree-node-content-height: 32px;
|
||||
// 节点内容边框弧度
|
||||
|
|
|
|||
|
|
@ -16,23 +16,23 @@
|
|||
// 拖拽上传框高度
|
||||
--tv-UploadDragger-height: 100px;
|
||||
// 拖拽上传框背景色
|
||||
--tv-UploadDragger-bg-color: var(--tv-color-bg-gray-1);
|
||||
--tv-UploadDragger-bg-color: var(--tv-color-bg-gray-1, #fafafa);
|
||||
// 拖拽上传框边框色
|
||||
--tv-UploadDragger-border-color: var(--tv-color-border);
|
||||
--tv-UploadDragger-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 拖拽上传框圆角
|
||||
--tv-UploadDragger-border-radius: var(--tv-border-radius-md);
|
||||
--tv-UploadDragger-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 拖拽上传框(链接文本|悬浮边框)色
|
||||
--tv-UploadDragger-hover-text-color: var(--tv-color-text-secondary);
|
||||
--tv-UploadDragger-hover-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 文件拖到框内上传框背景色
|
||||
--tv-UploadDragger-dragover-bg-color: rgba(32, 159, 255, 0.06);
|
||||
// 拖拽上传框内图标色
|
||||
--tv-UploadDragger-icon-color: var(--tv-color-icon-control);
|
||||
--tv-UploadDragger-icon-color: var(--tv-color-icon-control, #191919);
|
||||
// 拖拽上传框内图标尺寸
|
||||
--tv-UploadDragger-icon-font-size: 24px;
|
||||
// 拖拽上传框内文本色
|
||||
--tv-UploadDragger-text-color: var(--tv-color-text-secondary);
|
||||
--tv-UploadDragger-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 拖拽上传框内字号
|
||||
--tv-UploadDragger-text-font-size: var(--tv-font-size-default);
|
||||
--tv-UploadDragger-text-font-size: var(--tv-font-size-default, 14px);
|
||||
// 拖拽上传框文件列表边框色(hide)
|
||||
--tv-UploadDragger-files-border-color: #dcdfe6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,41 +12,41 @@
|
|||
|
||||
.inject-UploadList-vars() {
|
||||
// 上传文件列表字号
|
||||
--tv-UploadList-item-font-size: var(--tv-font-size-default);
|
||||
--tv-UploadList-item-font-size: var(--tv-font-size-default, 14px);
|
||||
// 上传文件列表文本色
|
||||
--tv-UploadList-item-text-color: var(--tv-color-text-secondary);
|
||||
--tv-UploadList-item-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 上传文件列表项(图片框|悬浮背景)圆角
|
||||
--tv-UploadList-item-border-radius: var(--tv-border-radius-lg);
|
||||
--tv-UploadList-item-border-radius: var(--tv-border-radius-lg, 8px);
|
||||
// 上传文件列表项悬浮背景色
|
||||
--tv-UploadList-item-hover-background-color: var(--tv-color-bg-hover);
|
||||
--tv-UploadList-item-hover-background-color: var(--tv-color-bg-hover, #f5f5f5);
|
||||
// 上传成功列表项悬浮文本色
|
||||
--tv-UploadList-item-hover-text-color: var(--tv-color-text-secondary);
|
||||
--tv-UploadList-item-hover-text-color: var(--tv-color-text-secondary, #595959);
|
||||
// 上传文件列表项前置图标色
|
||||
--tv-UploadList-item-name-icon-color: var(--tv-color-icon-control);
|
||||
--tv-UploadList-item-name-icon-color: var(--tv-color-icon-control, #191919);
|
||||
// 上传文件列表项前置图标尺寸
|
||||
--tv-UploadList-item-name-icon-font-size: var(--tv-icon-size);
|
||||
--tv-UploadList-item-name-icon-font-size: var(--tv-icon-size, 16px);
|
||||
// 上传文件列表项右侧图标色
|
||||
--tv-UploadList-svg-close-icon-color: var(--tv-color-icon);
|
||||
--tv-UploadList-svg-close-icon-color: var(--tv-color-icon, #808080);
|
||||
// 上传文件列表项右侧悬浮图标色
|
||||
--tv-UploadList-svg-close-hover-icon-color: var(--tv-color-icon-hover);
|
||||
--tv-UploadList-svg-close-hover-icon-color: var(--tv-color-icon-hover, #191919);
|
||||
// 上传文件列表项悬浮背景色
|
||||
--tv-UploadList-bg-color: var(--tv-color-bg);
|
||||
--tv-UploadList-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 上传文件列表项悬浮背景色hover
|
||||
--tv-UploadList-bg-color-hover: var(--tv-color-bg-hover-secondary);
|
||||
--tv-UploadList-bg-color-hover: var(--tv-color-bg-hover-secondary, #ffffff);
|
||||
// 上传文件列表项图标尺寸
|
||||
--tv-UploadList-svg-icon-font-size: var(--tv-icon-size);
|
||||
--tv-UploadList-svg-icon-font-size: var(--tv-icon-size, 16px);
|
||||
// 上传文件列表项成功图标尺寸
|
||||
--tv-UploadList-successful-icon-font-size: var(--tv-font-size-default);
|
||||
--tv-UploadList-successful-icon-font-size: var(--tv-font-size-default, 14px);
|
||||
// 照片墙上传列表项边框色
|
||||
--tv-UploadList-picture-card-item-border-color: var(--tv-color-border);
|
||||
--tv-UploadList-picture-card-item-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 照片墙上传列表项背景色
|
||||
--tv-UploadList-picture-card-item-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-UploadList-picture-card-item-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 照片墙上传列表项背景色hover
|
||||
--tv-UploadList-picture-card-item-bg-color-hover: var(--tv-color-bg-mask);
|
||||
--tv-UploadList-picture-card-item-bg-color-hover: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
|
||||
// 照片墙上传列表项右上角图标填充色
|
||||
--tv-UploadList-picture-card-item-icon-color: var(--tv-color-icon-inverse);
|
||||
--tv-UploadList-picture-card-item-icon-color: var(--tv-color-icon-inverse, #ffffff);
|
||||
// 上传列表项成功状态图标色或背景色
|
||||
--tv-UploadList-successful-status-bg-color: var(--tv-color-success-bg);
|
||||
--tv-UploadList-successful-status-bg-color: var(--tv-color-success-bg, #5cb300);
|
||||
// 照片墙上传列表项宽度(new)
|
||||
--tv-UploadList-picture-card-width: 100px;
|
||||
// 照片墙上传列表项高度(new)
|
||||
|
|
@ -54,9 +54,9 @@
|
|||
// 照片墙上传列表项进度条尺寸(new)
|
||||
--tv-UploadList-picture-card-progress-size: 68px;
|
||||
// 非picturecard模式上传文件列表文本行高(new)
|
||||
--tv-UploadList-item-line-height: var(--tv-line-height-number);
|
||||
--tv-UploadList-item-line-height: var(--tv-line-height-number, 1.5);
|
||||
// 非picturecard模式上传文件列表文本上外边距(new)
|
||||
--tv-UploadList-item-margin-top: var(--tv-space-md);
|
||||
--tv-UploadList-item-margin-top: var(--tv-space-md, 8px);
|
||||
// 上传文件列表项失败文本和图标色
|
||||
--tv-UploadList-item-fail-text-color: var(--tv-color-error-text);
|
||||
--tv-UploadList-item-fail-text-color: var(--tv-color-error-text, #f23030);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@
|
|||
|
||||
.inject-Upload-vars() {
|
||||
// 自定义上传提示字号
|
||||
--tv-Upload-tip-font-size: var(--tv-font-size-default);
|
||||
--tv-Upload-tip-font-size: var(--tv-font-size-default, 14px);
|
||||
// 自定义上传提示文本色
|
||||
--tv-Upload-tip-text-color: var(--tv-color-text-weaken);
|
||||
--tv-Upload-tip-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 照片墙上传按钮背景色
|
||||
--tv-Upload-picture-card-bg-color: var(--tv-color-bg-secondary);
|
||||
--tv-Upload-picture-card-bg-color: var(--tv-color-bg-secondary, #ffffff);
|
||||
// 照片墙上传按钮边框色
|
||||
--tv-Upload-picture-card-border-color: var(--tv-color-border);
|
||||
--tv-Upload-picture-card-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 照片墙上传按钮圆角
|
||||
--tv-Upload-picture-card-border-radius: var(--tv-border-radius-md);
|
||||
--tv-Upload-picture-card-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 照片墙上传按钮悬浮边框色
|
||||
--tv-Upload-picture-card-hover-border-color: var(--tv-color-border-hover);
|
||||
--tv-Upload-picture-card-hover-border-color: var(--tv-color-border-hover, #191919);
|
||||
// 照片墙上传按钮图标尺寸
|
||||
--tv-Upload-picture-card-icon-font-size: 24px;
|
||||
// 照片墙上传按钮图标色
|
||||
--tv-Upload-picture-card-icon-color: var(--tv-color-icon-control);
|
||||
--tv-Upload-picture-card-icon-color: var(--tv-color-icon-control, #191919);
|
||||
// 拖拽上传区域宽度
|
||||
--tv-Upload-picture-card-width: 100px;
|
||||
// 拖拽上传区域高度
|
||||
|
|
|
|||
|
|
@ -12,15 +12,15 @@
|
|||
|
||||
.inject-UserCard-vars() {
|
||||
// 卡片边框色
|
||||
--tv-UserCard-border-color: var(--tv-color-border);
|
||||
--tv-UserCard-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 卡片圆角
|
||||
--tv-UserCard-image-border-radius: var(--tv-border-radius-md);
|
||||
--tv-UserCard-image-border-radius: var(--tv-border-radius-md, 6px);
|
||||
// 在线文本色
|
||||
--tv-UserCard-state-online-text-color: var(--tv-color-success-text);
|
||||
--tv-UserCard-state-online-text-color: var(--tv-color-success-text, #5cb300);
|
||||
// 忙碌文本色
|
||||
--tv-UserCard-state-busy-text-color: var(--tv-color-error-text);
|
||||
--tv-UserCard-state-busy-text-color: var(--tv-color-error-text, #f23030);
|
||||
// 离开文本色
|
||||
--tv-UserCard-state-goaway-text-color: var(--tv-color-warn-text);
|
||||
--tv-UserCard-state-goaway-text-color: var(--tv-color-warn-text, #ff8800);
|
||||
// 离线文本色
|
||||
--tv-UserCard-state-offline-text-color: var(--tv-color-text-disabled);
|
||||
--tv-UserCard-state-offline-text-color: var(--tv-color-text-disabled, #c2c2c2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,23 +12,23 @@
|
|||
|
||||
.inject-UserContact-vars() {
|
||||
// 文本大小
|
||||
--tv-UserContact-font-size: var(--tv-font-size-default);
|
||||
--tv-UserContact-font-size: var(--tv-font-size-default, 14px);
|
||||
// 文本颜色
|
||||
--tv-UserContact-role-info-text-color: var(--tv-color-text-weaken);
|
||||
--tv-UserContact-role-info-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 文字尺寸
|
||||
--tv-UserContact-role-info-font-size: var(--tv-font-size-sm);
|
||||
--tv-UserContact-role-info-font-size: var(--tv-font-size-sm, 12px);
|
||||
// 提示信息文字颜色
|
||||
--tv-UserContact-card-message-text-color: var(--tv-color-text-weaken);
|
||||
--tv-UserContact-card-message-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// 卡片边框颜色
|
||||
--tv-UserContact-card-border-color: var(--tv-color-border);
|
||||
--tv-UserContact-card-border-color: var(--tv-color-border, #c2c2c2);
|
||||
// 卡片头部背景色
|
||||
--tv-UserContact-card-header-bg-color: var(--tv-color-bg-primary);
|
||||
--tv-UserContact-card-header-bg-color: var(--tv-color-bg-primary, #191919);
|
||||
// 头像字体颜色
|
||||
--tv-UserContact-card-header-role-text-color: var(--tv-color-text-inverse);
|
||||
--tv-UserContact-card-header-role-text-color: var(--tv-color-text-inverse, #ffffff);
|
||||
// 头像字体大小
|
||||
--tv-UserContact-card-header-role-font-size: var(--tv-font-size-default);
|
||||
--tv-UserContact-card-header-role-font-size: var(--tv-font-size-default, 14px);
|
||||
// 头像数字字体颜色
|
||||
--tv-UserContact-card-header-role-num-text-color: var(--tv-color-text-weaken);
|
||||
--tv-UserContact-card-header-role-num-text-color: var(--tv-color-text-weaken, #808080);
|
||||
// espace字体颜色
|
||||
--tv-UserContact-card-espace-text-color: var(--tv-color-text-weaken);
|
||||
--tv-UserContact-card-espace-text-color: var(--tv-color-text-weaken, #808080);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
*/
|
||||
|
||||
.inject-UserHead-vars() {
|
||||
--tv-UserHead-head-font-size: var(--tv-font-size-default);
|
||||
--tv-UserHead-head-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-UserHead-head-normal-size: 72px;
|
||||
--tv-UserHead-head-small-size: 30px;
|
||||
--tv-UserHead-head-icon-size-normal: 40px;
|
||||
--tv-UserHead-head-icon-small-size: 14px;
|
||||
--tv-UserHead-head-border-radius: var(--tv-border-radius-xs);
|
||||
--tv-UserHead-head-border-radius: var(--tv-border-radius-xs, 2px);
|
||||
--tv-UserHead-head-bg-color: #bbbbbb;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
*/
|
||||
|
||||
.inject-UserLink-vars() {
|
||||
--tv-UserLink-font-size: var(--tv-font-size-default);
|
||||
--tv-UserLink-text-color: var(--tv-color-text);
|
||||
--tv-UserLink-font-weight: var(--tv-font-weight-bold);
|
||||
--tv-UserLink-border-radius: var(--tv-border-radius-md);
|
||||
--tv-UserLink-font-size: var(--tv-font-size-default, 14px);
|
||||
--tv-UserLink-text-color: var(--tv-color-text, #191919);
|
||||
--tv-UserLink-font-weight: var(--tv-font-weight-bold, 600);
|
||||
--tv-UserLink-border-radius: var(--tv-border-radius-md, 6px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
.inject-User-vars() {
|
||||
// 字体尺寸
|
||||
--tv-User-font-size: var(--tv-font-size-default);
|
||||
--tv-User-font-size: var(--tv-font-size-default, 14px);
|
||||
// 选中项标签背景颜色
|
||||
--tv-User-tag-bg-color: var(--tv-color-bg);
|
||||
--tv-User-tag-bg-color: var(--tv-color-bg, #f5f5f5);
|
||||
// 人员图标颜色
|
||||
--tv-User-svg-color: var(--tv-color-icon);
|
||||
--tv-User-svg-color: var(--tv-color-icon, #808080);
|
||||
// 人员图标禁用颜色
|
||||
--tv-User-svg-color-disabled: var(--tv-color-icon-disabled);
|
||||
--tv-User-svg-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue