Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 Noospic
|
fb6c5b0091 |
|
|
@ -19,4 +19,607 @@ export const deepTheme = {
|
|||
'ti-autocomplete-li-text-color': '#252b3a',
|
||||
'ti-autocomplete-li-hover-bg-color': '#E2E2E6',
|
||||
'ti-autocomplete-li-select-bg-color': '#d5d5db'
|
||||
|
||||
|
||||
/*1.deep-背景色*/
|
||||
'ti-base-color-bg-9': '#8B0000',
|
||||
'ti-base-color-bg-8': '#A52A2A',
|
||||
'ti-base-color-bg-7': '#B22222',
|
||||
'ti-base-color-bg-6': '#2F2F2F',
|
||||
'ti-base-color-bg-5': '#3C3C3C',
|
||||
'ti-base-color-bg-4': '#4A4A4A',
|
||||
'ti-base-color-bg-3': '#1E1E1E',
|
||||
'ti-base-color-bg-2': '#121212',
|
||||
'ti-base-color-bg-1': '#0A0A0A',
|
||||
|
||||
|
||||
/* 2.deep-品牌主色 */
|
||||
'ti-base-color-brand-6': '#1e3a5f' /* 深蓝色 */,
|
||||
/* 主色衍生色 */
|
||||
'ti-base-color-brand-8': '#123459', // 品牌色-8 active
|
||||
'ti-base-color-brand-7': '#275980', // 品牌色-7
|
||||
'ti-base-color-brand-5': '#4878a8', // 品牌色-5 hover active
|
||||
'ti-base-color-brand-4': '#ffffff', // 品牌色-4 白色用于深色主题中的文本或高对比度的元素
|
||||
'ti-base-color-brand-3': '#6789b0', // 品牌色-3
|
||||
'ti-base-color-brand-2': '#1e3a5f', // 品牌色-2 使用较深的背景色
|
||||
'ti-base-color-brand-1': '#141b28', // 品牌色-1 用于页面背景
|
||||
|
||||
/* 3.deep-中立色 */
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色 */
|
||||
'ti-base-color-common-9': '#0d0d0d', // 更深的灰黑色，适用于极深的背景或文本
|
||||
'ti-base-color-common-8': '#1a1f2a', // 深灰蓝色，适用于导航条背景
|
||||
'ti-base-color-common-7': '#262626', // 深灰色，适用于默认文本颜色
|
||||
'ti-base-color-common-6': '#3a3f4b', // 深灰蓝色，适用于次要深色背景或线条
|
||||
'ti-base-color-common-5': '#4d4d4d', // 中深灰色，适用于次要文本
|
||||
'ti-base-color-common-4': '#475364', // 中深灰蓝色，适用于次要深色背景或线条
|
||||
'ti-base-color-common-3': '#646a75', // 中灰蓝色，适用于浅色背景或装饰性线条
|
||||
'ti-base-color-common-2': '#4d4d4d', // 中灰色，适用于禁用状态的文本或图标
|
||||
'ti-base-color-common-1': '#a3a3a3', // 更浅的灰色，适用于分隔线或禁用状态的元素
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
|
||||
/* 以下为欧若拉theme 配色，待更改*/
|
||||
/* 1.1品牌色 */
|
||||
/* 品牌主色 */
|
||||
'ti-base-color-brand-6': '#1890ff' /* 主色蓝 */,
|
||||
/* 主色衍生色 */
|
||||
'ti-base-color-brand-8': '#096dd9', // 品牌色-8 active
|
||||
'ti-base-color-brand-7': '#0c82f0', // 品牌色-7
|
||||
'ti-base-color-brand-5': '#40a9ff', // 品牌色-5 // hover active
|
||||
'ti-base-color-brand-4': '#000', // 品牌色-4
|
||||
'ti-base-color-brand-3': '#8cc7f7', // 品牌色-3
|
||||
'ti-base-color-brand-2': '#e6f7ff', // 品牌色-2
|
||||
'ti-base-color-brand-1': '#f2f5fc', // 品牌色-1
|
||||
|
||||
/* 1.2中立色 */
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色 */
|
||||
'ti-base-color-common-9': '#181818', // 中立色-9
|
||||
'ti-base-color-common-8': '#2e3243', // 中立色-8 导航条背景
|
||||
'ti-base-color-common-7': '#333', // 中立色-7 默认文本色
|
||||
'ti-base-color-common-6': '#464c59', // 中立色-6
|
||||
'ti-base-color-common-5': '#666', // 中立色-5 次要文本
|
||||
'ti-base-color-common-4': '#54657e', // 中立色-4
|
||||
'ti-base-color-common-3': '#8a8e99', // 中立色-3
|
||||
'ti-base-color-common-2': '#666', // 中立色-2 文本禁用使用
|
||||
'ti-base-color-common-1': '#d9d9d9', // 中立色-1 分隔线，disabled
|
||||
|
||||
/* 1.3背景色 */
|
||||
// 不变，前3个用不到， 后面的看不太出来。
|
||||
'ti-base-color-bg-9': '#cf1322', // 背景-9
|
||||
'ti-base-color-bg-8': '#f5222d', // 背景-8
|
||||
'ti-base-color-bg-7': '#ff4d4f', // 背景-7
|
||||
'ti-base-color-bg-6': '#eef0f5', // 背景-6
|
||||
'ti-base-color-bg-5': '#f5f5f5', // 背景-5
|
||||
'ti-base-color-bg-4': '#fafafa', // 背景-4
|
||||
'ti-base-color-bg-3': '#ffffff', // 背景-3
|
||||
'ti-base-color-bg-2': '#ffffff', // 背景-2
|
||||
'ti-base-color-bg-1': '#ffffff', // 背景-1
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 1.4功能色 */
|
||||
'ti-base-color-error-4': '#cf1322', // 错误-4
|
||||
'ti-base-color-error-3': '#f5222d', // 错误-3
|
||||
'ti-base-color-error-2': '#ff4d4f', // 错误-2
|
||||
'ti-base-color-error-1': '#d8bab5', // 错误-1
|
||||
|
||||
'ti-base-color-success-4': '#389e0d', // 成功-4
|
||||
'ti-base-color-success-3': '#52c41a', // 成功-3
|
||||
'ti-base-color-success-2': '#73d13d', // 成功-2
|
||||
'ti-base-color-success-1': '#a6c3b9', // 成功-1
|
||||
|
||||
'ti-base-color-warn-5': '#ffc53d', // 告警-5 文本色使用
|
||||
'ti-base-color-warn-4': '#faad14', // 告警-4 图标色使用
|
||||
'ti-base-color-warn-3': '#ffc53d', // 告警-3 未使用到, 补一个色
|
||||
'ti-base-color-warn-2': '#ffc53d', // 告警-2 border使用
|
||||
'ti-base-color-warn-1': '#d3c6a2', // 告警-1 背景使用
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加 */
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
|
||||
'ti-common-color-light': '#fff',
|
||||
'ti-common-color-dark': '#000',
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
'ti-common-color-text-success': '#333', // 成功-文字色
|
||||
'ti-common-color-success-bg': '#f6ffed', // 成功-背景色
|
||||
'ti-common-color-success-border': '#95de64', // 成功-边框色
|
||||
|
||||
'ti-common-color-error-text': 'var(--ti-base-color-error-3)', // 错误-文字色
|
||||
'ti-common-color-error-bg': '#fff1f0', // 错误-背景色/校验背景色
|
||||
'ti-common-color-error-border': '#ff7875', // 错误-校验边框色
|
||||
|
||||
'ti-common-color-info': '#909399', // 信息-图标色/状态图标-信息
|
||||
'ti-common-color-info-text': '#909399', // 信息-文字色
|
||||
'ti-common-color-info-bg': 'rgba(51, 51, 51, 0.06)', // 信息-背景色
|
||||
'ti-common-color-info-border': 'rgba(51,51,51,.15)', // 信息-边框色
|
||||
|
||||
'ti-common-color-warn-text': '#333', // 告警-文字色
|
||||
'ti-common-color-warn-bg': '#fffbe6', // 告警-背景色
|
||||
'ti-common-color-warn-border': '#ffd666', // 告警-边框色
|
||||
|
||||
'ti-common-color-prompt-text': '#333', // 提示-图标色
|
||||
'ti-common-color-prompt-bg': '#e6f7ff', // 提示-背景色
|
||||
'ti-common-color-prompt-border': '#91d5ff', // 提示-边框色
|
||||
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
'ti-common-color-primary-active': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-primary-disabled': '#bfbfbf',
|
||||
'ti-common-color-primary-disabled-bgcolor': '#d9d9d9',
|
||||
'ti-common-color-primary-disabled-border': '#bfbfbf',
|
||||
'ti-common-color-primary-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-success-disabled-bgcolor': '#a6c3b9',
|
||||
'ti-common-color-success-active': 'var(--ti-base-color-success-4)',
|
||||
'ti-common-color-success-disabled': 'var(--ti-base-color-success-1)', // 禁用背景色
|
||||
'ti-common-color-success-disabled-border': 'var(--ti-base-color-success-1)', // 禁用边框色
|
||||
'ti-common-color-success-disabled-text': '#fff', // 禁用文本色
|
||||
|
||||
'ti-common-color-warning-disabled': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-bgcolor': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-border': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-danger-disabled': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-bgcolor': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-border': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-info-disabled': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-bgcolor': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-border': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-text': '#fff',
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
'ti-common-color-text-primary': 'var(--ti-base-color-common-7)', // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
'ti-common-color-text-secondary': '#666', // 二级文本色-次要信息
|
||||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-3)', // 三级文本色-弱化信息/说明文字 未使用
|
||||
'ti-common-color-text-disabled': '#999', // 文本禁用信息
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-2)', // 深色背景下文本信息 未使用
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-5)', // 深色背景下文本信息禁用色 未使用
|
||||
'ti-common-color-text-link': '#606266', // 链接色
|
||||
'ti-common-color-text-link-hover': '#40a9ff', // 链接悬浮色
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)', // 深色背景链接色
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-3)', // 深色背景链接悬浮色
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-6)', // 文本高亮色
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)', // 深色背景或图标上文字色
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-white)', // 深色背景下的文本色，用于tip
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-common-4)', // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-error-4)', // 文本_金额
|
||||
'ti-common-color-placeholder': '#999', // NewCssVar 占位/禁用文本颜色
|
||||
'ti-common-color-selected-text-color': '#333', // 默认/选中时的文本颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
'ti-common-color-icon-normal': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-disabled': '#999', // 图标禁用色/状态图标-禁用、停止
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
|
||||
// 灰色背景下图标色
|
||||
'ti-common-color-icon-graybg-normal': '#999',
|
||||
'ti-common-color-icon-graybg-hover': '#999',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-disabled': '#999',
|
||||
|
||||
// 深底背景图标色
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
|
||||
// 状态图标背景色
|
||||
'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)', // 状态图标-常规、信息提示
|
||||
|
||||
/**
|
||||
* 2.6 背景色
|
||||
**/
|
||||
/* 基础背景色 各状态色 */
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg-6)', // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand-6)', // 背景高亮色
|
||||
'ti-common-color-bg-disabled': '#f5f5f5',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-8)', // 主色背景悬浮色
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-4)', // 新区域组件-悬浮背景色
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-2)', // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件 */
|
||||
'ti-common-bg-primary': 'var(--ti-base-color-bg-8)', // 重要按钮背景色
|
||||
'ti-common-bg-primary-hover': 'var(--ti-base-color-bg-7)', // 重要按钮背景悬浮、focus色
|
||||
'ti-common-bg-primary-active': 'var(--ti-base-color-bg-9)', // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景 */
|
||||
'ti-common-bg-minor': 'var(--ti-base-color-bg-2)', // 次要按钮背景色
|
||||
'ti-common-bg-minor-hover': 'var(--ti-base-color-bg-1)', // 次要按钮背景悬浮、focus色
|
||||
'ti-common-bg-minor-active': 'var(--ti-base-color-bg-3)', // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色 */
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-white)', // 白色背景，用于输入框背景
|
||||
'ti-common-color-bg-white-emphasize': 'var(--ti-base-color-brand-1)', // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色 */
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-2)', // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-3)', // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色 */
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-common-6)', // 一级tab页签背景色
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-common-4)', // 一级tab页签背景-悬浮色
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-common-color-bg-normal)', // 一级tab页签背景-激活/focus状态背景色
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-common-6)', // tip、alert提示背景色
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-1)', // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu */
|
||||
'ti-common-color-bg-navigation': '#2e3243', // 深色导航背景色
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-common-9)', // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
'ti-common-color-selected-background': '#f5f5f5', // 选中高亮背景色
|
||||
'ti-common-color-hover-background': '#e6f7ff', // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
'ti-common-color-data-1': 'var(--ti-base-color-success-3)', // 图表数据色-1
|
||||
'ti-common-color-data-2': 'var(--ti-base-color-icon-info)', // 图表数据色-2
|
||||
'ti-common-color-data-3': 'var(--ti-base-color-data-3)', // 图表数据色-3
|
||||
'ti-common-color-data-4': 'var(--ti-base-color-data-4)', // 图表数据色-4
|
||||
'ti-common-color-data-5': 'var(--ti-base-color-data-5)', // 图表数据色-5
|
||||
'ti-common-color-data-6': 'var(--ti-base-color-warn-3)', // 图表数据色-6
|
||||
'ti-common-color-data-7': 'var(--ti-base-color-warn-4)', // 图表数据色-7
|
||||
'ti-common-color-data-8': 'var(--ti-base-color-error-3)', // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
* TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一
|
||||
*/
|
||||
|
||||
'ti-common-line-height-number': '1.5', // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
'ti-common-line-height-base': '12px', // NewCssVar 跟字号保持一致
|
||||
'ti-common-line-height-1': '14px', // NewCssVar
|
||||
'ti-common-line-height-2': '16px', // NewCssVar
|
||||
'ti-common-line-height-3': '18px', // NewCssVar
|
||||
'ti-common-line-height-4': '20px', // NewCssVar
|
||||
'ti-common-line-height-5': '24px', // NewCssVar
|
||||
'ti-common-line-height-6': '32px', // NewCssVar
|
||||
'ti-common-line-height-7': '36px', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
* 适用于组件中的margin、padding
|
||||
**/
|
||||
|
||||
/* 基础间距 */
|
||||
'ti-common-space-base': '4px',
|
||||
'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)', // 间距-2
|
||||
'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)', // 间距-3
|
||||
'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)', // 间距-4
|
||||
'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)', // 间距-5
|
||||
'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)', // 间距-6
|
||||
'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)', // 间距-7
|
||||
'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)', // 间距-8
|
||||
|
||||
/* 其他间距 */
|
||||
'ti-common-space-0': '0px', // 其他间距-1
|
||||
'ti-common-space-1': '1px', // 其他间距-2
|
||||
'ti-common-space-6': '6px', // 其他间距-3
|
||||
'ti-common-space-10': '10px', // 其他间距-4
|
||||
'ti-common-dropdown-gap': '2px', // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
'ti-common-shadow-1-up': '0 -1px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 上
|
||||
'ti-common-shadow-1-down': '0 1px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 下
|
||||
'ti-common-shadow-1-left': '-1px 0px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 左
|
||||
'ti-common-shadow-1-right': '1px 0px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 右
|
||||
'ti-common-shadow-2-up': '0 -2px 8px 0 rgba(0, 0, 0, 0.2)', // 阴影-2 上
|
||||
'ti-common-shadow-2-down': '0 2px 12px rgba(0, 0, 0, 0.1)', // 阴影-2 下 select 等下拉弹框的阴影
|
||||
'ti-common-shadow-2-left': '-2px 0 8px 0 rgba(238, 10, 10, 0.2)', // 阴影-2 左
|
||||
'ti-common-shadow-2-right': '2px 0 8px 0 rgba(252, 5, 5, 0.2)', // 阴影-2 右
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 上
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 下
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 左
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 右
|
||||
'ti-common-shadow-4-up': '0 -8px 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 上
|
||||
'ti-common-shadow-4-down': '0 8px 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 下
|
||||
'ti-common-shadow-4-left': '-8px 0 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 左
|
||||
'ti-common-shadow-4-right': '0 0 10px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 右 modal等弹窗的阴影
|
||||
|
||||
/* 提示类阴影 */
|
||||
'ti-common-shadow-error': '0 1px 3px 0 rgba(199, 54, 54, 0.25)', // 错误
|
||||
'ti-common-shadow-warn': '0 1px 3px 0 rgba(204, 100, 20, 0.25)', // 告警
|
||||
'ti-common-shadow-prompt': '0 1px 3px 0 rgba(70, 94, 184, 0.25)', // 提示
|
||||
'ti-common-shadow-success': '0 1px 3px 0 rgba(39, 176, 128, 0.25)', // 成功
|
||||
|
||||
/**
|
||||
* 2.11 字体
|
||||
**/
|
||||
'ti-common-font-family': 'Helvetica, Arial, microsoft yahei',
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
'ti-common-font-size-base': '12px', // NewCssVar 正文-常规
|
||||
'ti-common-font-size-1': '14px', // NewCssVar 标题-小
|
||||
'ti-common-font-size-2': '16px', // NewCssVar 标题-中
|
||||
'ti-common-font-size-3': '18px', // NewCssVar 标题-大
|
||||
'ti-common-font-size-4': '20px', // NewCssVar 字号-4
|
||||
'ti-common-font-size-5': '24px', // NewCssVar 字号-5
|
||||
'ti-common-font-size-6': '32px', // NewCssVar 字号-6
|
||||
'ti-common-font-size-7': '36px', // NewCssVar 字号-7
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
**/
|
||||
'ti-common-font-weight-1': '100', // 极细
|
||||
'ti-common-font-weight-2': '200', // 纤细
|
||||
'ti-common-font-weight-3': '300', // 细体
|
||||
'ti-common-font-weight-4': 'normal', // 常规
|
||||
'ti-common-font-weight-5': '500', // 中等
|
||||
'ti-common-font-weight-6': '600', // 半粗
|
||||
'ti-common-font-weight-7': 'bold', // 粗体
|
||||
'ti-common-font-weight-8': '800', // 中黑
|
||||
'ti-common-font-weight-9': '900', // 黑体
|
||||
'ti-common-font-weight-bold': '700', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
'ti-common-color-line-normal': 'var(--ti-base-color-common-1)', // 边框默认色
|
||||
'ti-common-color-line-hover': 'var(--ti-base-color-brand-6)', // 边框悬浮色
|
||||
'ti-common-color-line-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-1)', // 边框禁用色
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-1)', // 分割线颜色
|
||||
/* 虚线 */
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-brand-7)',
|
||||
/* 待整改后删除 */
|
||||
'ti-common-color-border': 'var(--ti-base-color-common-1)', // 边框默认色
|
||||
'ti-common-color-border-hover': 'var(--ti-base-color-brand-6)', // 边框悬浮色
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
**/
|
||||
'ti-common-border-weight-normal': '1px', // 常规
|
||||
'ti-common-border-weight-1': '2px', // 较粗
|
||||
'ti-common-border-weight-2': '3px', // 粗
|
||||
|
||||
/**
|
||||
* 2.16 线样式
|
||||
**/
|
||||
'ti-common-border-style-dashed': 'dasehd', // 虚线
|
||||
'ti-common-border-style-dotted': 'dotted', // 点线
|
||||
'ti-common-border-style-solid': 'solid', // 实线
|
||||
|
||||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
'ti-common-border-radius-normal': '2px', // 常规
|
||||
'ti-common-border-radius-0': '0px', // 直角 未使用
|
||||
'ti-common-border-radius-1': '4px', // 圆角-1
|
||||
'ti-common-border-radius-2': '8px', // 圆角-2
|
||||
'ti-common-border-radius-3': '50%', // 圆形
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
**/
|
||||
'ti-common-size-base': '4px', // 基础尺寸
|
||||
'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)', // 尺寸-2
|
||||
'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)', // 尺寸-3
|
||||
'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)', // 尺寸-4
|
||||
'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)', // 尺寸-5
|
||||
'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)', // 尺寸-6
|
||||
'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)', // 尺寸-7
|
||||
'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)', // 尺寸-8
|
||||
'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)', // 尺寸-9
|
||||
'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)', // 尺寸-10
|
||||
'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)', // 尺寸-11
|
||||
'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)', // 尺寸-12
|
||||
'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)', // 尺寸-13
|
||||
'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)', // 尺寸-14
|
||||
'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)', // 尺寸-15
|
||||
'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)', // 尺寸-16
|
||||
'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)', // 尺寸-17
|
||||
'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)', // 尺寸-18
|
||||
'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)', // 尺寸-19
|
||||
'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)', // 尺寸-20
|
||||
'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)', // 尺寸-21
|
||||
'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)', // 尺寸-22
|
||||
'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)', // 尺寸-23
|
||||
'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)', // 尺寸-24
|
||||
'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)', // 尺寸-25
|
||||
'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)', // 尺寸-26
|
||||
'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)', // 尺寸-27
|
||||
'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)', // 尺寸-28
|
||||
'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)', // 尺寸-29
|
||||
'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)', // 尺寸-30
|
||||
'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)', // 尺寸-31
|
||||
'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)', // 尺寸-32
|
||||
'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)', // 尺寸-33
|
||||
'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)', // 尺寸-34
|
||||
'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)', // 尺寸-35
|
||||
'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)', // 尺寸-36
|
||||
'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)', // 尺寸-37
|
||||
'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)', // 尺寸-38
|
||||
'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)', // 尺寸-39
|
||||
'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)', // 尺寸-40
|
||||
'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)', // 尺寸-41
|
||||
'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)', // 尺寸-42
|
||||
'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)', // 尺寸-43
|
||||
'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)', // 尺寸-44
|
||||
'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)', // 尺寸-45
|
||||
'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)', // 尺寸-46
|
||||
'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)', // 尺寸-47
|
||||
'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)', // 尺寸-48
|
||||
'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)', // 尺寸-49
|
||||
'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)', // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
'ti-common-size-0': '0px', // 其他尺寸-1
|
||||
'ti-common-size-auto': 'auto', // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
'ti-common-size-width-large': 'var(--ti-common-size-33x)', // NewCssVar
|
||||
'ti-common-size-width-medium': 'var(--ti-common-size-30x)', // NewCssVar
|
||||
'ti-common-size-width-normal': 'var(--ti-common-size-20x)', // NewCssVar
|
||||
'ti-common-size-width-minor': '30px', // NewCssVar 待删除
|
||||
|
||||
'ti-common-size-height-large': 'var(--ti-common-size-12x)', // NewCssVar
|
||||
'ti-common-size-height-medium': 'var(--ti-common-size-10x)', // NewCssVar
|
||||
'ti-common-size-height-small': 'var(--ti-common-size-8x)', // NewCssVar
|
||||
'ti-common-size-height-normal': '30px', // NewCssVar 基本高度值（Button、Input）
|
||||
'ti-common-size-height-mini': 'var(--ti-common-size-6x)', // NewCssVar
|
||||
|
||||
// 以下皆为新增变量
|
||||
// 新增saurora缺少的basic-var.less变量
|
||||
'ti-common-color-primary-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)',
|
||||
|
||||
// aurora适配过程中产生的新变量如下
|
||||
// 文本色
|
||||
'ti-base-text-color-1': '#333d48',
|
||||
'ti-base-text-color-2': '#161e26',
|
||||
'ti-base-text-color-3': '#c4c4c4',
|
||||
'ti-base-text-color-4': '#3eaf7c',
|
||||
'ti-base-text-color-5': '#1F2D3D',
|
||||
'ti-base-text-color-6': '#c0c4cc',
|
||||
|
||||
// 图标色
|
||||
'ti-base-icon-color-1': '#939599',
|
||||
'ti-base-icon-color-2': '#78828d',
|
||||
|
||||
// 文本或图标色带透明度
|
||||
'ti-base-text-color-transparent-10': 'rgba(22, 30, 38, 0.1)',
|
||||
'ti-base-text-color-transparent-30': 'rgba(22, 30, 38, 0.3)',
|
||||
'ti-base-icon-color-transparent-75': 'rgba(0, 0, 0, 0.75)',
|
||||
|
||||
// 边框色
|
||||
'ti-base-border-color-1': '#e4e7ed',
|
||||
'ti-base-border-color-2': '#69c0ff',
|
||||
'ti-base-border-color-3': '#b3d8ff',
|
||||
'ti-base-border-color-4': '#c2e7b0',
|
||||
'ti-base-border-color-5': '#fbc4c4',
|
||||
'ti-base-border-color-6': '#f5dab1',
|
||||
|
||||
// 边框色带透明度
|
||||
'ti-base-border-color-transparent-15': 'rgba(24,144,255,.15)',
|
||||
'ti-base-border-color-transparent-30': 'rgba(57, 57, 57, 0.3)',
|
||||
'ti-base-border-color-warn-transparent-6': 'rgba(250,173,20,.06)',
|
||||
'ti-base-border-color-warn-transparent-15': 'rgba(250,173,20,.15)',
|
||||
'ti-base-border-color-success-transparent-15': 'rgba(82,196,26,.15)',
|
||||
'ti-base-border-color-danger-transparent-15': 'rgba(245,34,45,.15)',
|
||||
|
||||
// 背景色
|
||||
'ti-base-bg-color-1': '#303133',
|
||||
'ti-base-bg-color-2': '#0067d1', // 常用于聚焦背景色
|
||||
'ti-base-bg-color-3': '#005bba',
|
||||
'ti-base-bg-color-4': '#67c23a',
|
||||
'ti-base-bg-color-5': '#e6a23c',
|
||||
'ti-base-bg-color-6': '#f1f1f1',
|
||||
'ti-base-bg-color-7': '#d8d8d8',
|
||||
'ti-base-bg-color-8': '#0072e8', // 用于鼠标悬浮
|
||||
'ti-base-bg-color-9': '#fa8c16', // 警告背景色
|
||||
'ti-base-bg-color-10': '#dbdbdb',
|
||||
|
||||
// 背景色带透明度
|
||||
'ti-base-bg-color-transparent-5': 'rgba(22, 30, 38, 0.05)',
|
||||
'ti-base-bg-color-transparent-6': 'rgba(24,144,255,.06)',
|
||||
'ti-base-bg-color-transparent-20': 'rgba(22, 30, 38, 0.2)',
|
||||
'ti-base-bg-color-transparent-30': 'rgba(0, 103, 209, 0.3)',
|
||||
'ti-base-bg-color-warn-transparent-6': 'rgba(24,144,255,.06)',
|
||||
'ti-base-bg-color-danger-transparent-6': 'rgba(245,34,45,.06)',
|
||||
'ti-base-bg-color-success-transparent-6': 'rgba(82,196,26,.06)',
|
||||
|
||||
// 阴影
|
||||
'ti-base-box-shadow': '0 0 4px 0 #d9d9d9',
|
||||
|
||||
// 新属性
|
||||
'ti-base-text-decoration-underline': 'underline',
|
||||
'ti-base-rotate-0': 'rotate(0)',
|
||||
'ti-base-rotate-90': 'rotate(90deg)',
|
||||
'ti-base-percent-30': '30%',
|
||||
'ti-base-percent-60': '60%',
|
||||
'ti-base-text-align': 'center',
|
||||
'ti-base-opacity-8': '0.8',
|
||||
|
||||
'ti-common-text-color-normal': 'var(--ti-base-text-color-1)', // 默认文本色2
|
||||
'ti-common-text-color-secondary': 'var(--ti-base-text-color-2)', // 次要文本色
|
||||
'ti-common-text-color-3': 'var(--ti-base-text-color-3)', // 次要文本色
|
||||
'ti-common-text-color-4': 'var(--ti-base-text-color-4)',
|
||||
'ti-common-text-color-5': 'var(--ti-base-text-color-5)',
|
||||
'ti-common-text-color-6': 'var(--ti-base-text-color-6)',
|
||||
'ti-common-text-color-transparent-10': 'var(--ti-base-text-color-transparent-10)',
|
||||
'ti-common-text-color-transparent-30': 'var(--ti-base-text-color-transparent-30)',
|
||||
|
||||
'ti-common-icon-color-1': 'var(--ti-base-icon-color-1)',
|
||||
'ti-common-icon-color-2': 'var(--ti-base-icon-color-2)',
|
||||
'ti-common-icon-color-transparent-75': 'var(--ti-base-icon-color-transparent-75)', // 图标色
|
||||
|
||||
'ti-common-border-color-normal': 'var(--ti-base-border-color-1)',
|
||||
'ti-common-border-color-info': 'var(--ti-base-border-color-2)', // 提示边框色
|
||||
'ti-common-border-color-plain': 'var(--ti-base-border-color-3)',
|
||||
'ti-common-border-color-success': 'var(--ti-base-border-color-4)',
|
||||
'ti-common-border-color-danger': 'var(--ti-base-border-color-5)',
|
||||
'ti-common-border-color-warn': 'var(--ti-base-border-color-6)',
|
||||
'ti-common-border-color-transparent-15': 'var(--ti-base-border-color-transparent-15)',
|
||||
'ti-common-border-color-transparent-30': 'var(--ti-base-border-color-transparent-30)',
|
||||
'ti-common-border-color-warn-transparent-6': 'var(--ti-base-border-color-warn-transparent-6)',
|
||||
'ti-common-border-color-warn-transparent-15': 'var(--ti-base-border-color-warn-transparent-15)',
|
||||
'ti-common-border-color-success-transparent-15': 'var(--ti-base-border-color-success-transparent-15)',
|
||||
'ti-common-border-color-danger-transparent-15': 'var(--ti-base-border-color-danger-transparent-15)',
|
||||
|
||||
'ti-common-bg-color-transparent-5': 'var(--ti-base-bg-color-transparent-5)', // 次要禁用背景色
|
||||
'ti-common-bg-color-transparent-6': 'var(--ti-base-bg-color-transparent-6)', // 次要禁用背景色
|
||||
'ti-common-bg-color-transparent-20': 'var(--ti-base-bg-color-transparent-20)',
|
||||
'ti-common-bg-color-transparent-30': 'var(--ti-base-bg-color-transparent-30)', // 禁用背景色
|
||||
'ti-common-bg-color-warn-transparent-6': 'var(--ti-base-bg-color-warn-transparent-6)',
|
||||
'ti-common-bg-color-danger-transparent-6': 'var(--ti-base-bg-color-danger-transparent-6)',
|
||||
'ti-common-bg-color-success-transparent-6': 'var(--ti-base-bg-color-success-transparent-6)',
|
||||
'ti-common-bg-color-normal': 'var(--ti-base-bg-color-1)', // 弹框背景色
|
||||
'ti-common-bg-color-focus': 'var(--ti-base-bg-color-2)', // 聚焦背景色
|
||||
'ti-common-bg-color-active': 'var(--ti-base-bg-color-3)', // hover或点击背景色
|
||||
'ti-common-bg-color-success': 'var(--ti-base-bg-color-4)', // 成功背景色
|
||||
'ti-common-bg-color-warn': 'var(--ti-base-bg-color-5)', // 警告背景色
|
||||
'ti-common-bg-color-header-1': 'var(--ti-base-bg-color-6)',
|
||||
'ti-common-bg-color-header-2': 'var(--ti-base-bg-color-7)',
|
||||
'ti-common-bg-color-hover': 'var(--ti-base-bg-color-8)',
|
||||
'ti-common-bg-color-warn-1': 'var(--ti-base-bg-color-9)',
|
||||
'ti-common-bg-color-10': 'var(--ti-base-bg-color-10)',
|
||||
|
||||
'ti-common-box-shadow': 'var(--ti-base-box-shadow)',
|
||||
|
||||
// 新属性变量
|
||||
'ti-common-text-decoration-underline': 'var(--ti-base-text-decoration-underline)',
|
||||
|
||||
'ti-common-rotate-0': 'var(--ti-base-rotate-0)',
|
||||
'ti-common-rotate-90': 'var(--ti-base-rotate-90)',
|
||||
|
||||
'ti-common-percent-30': 'var(--ti-base-percent-30)',
|
||||
'ti-common-percent-60': 'var(--ti-base-percent-60)',
|
||||
'ti-common-opacity-8': 'var(--ti-base-opacity-8)', // 透明度
|
||||
|
||||
// 文本居中
|
||||
'ti-common-text-align': 'var(--ti-base-text-align)'
|
||||
}
|
||||
|
||||
export * from './component.js'
|
||||
Loading…
Reference in New Issue