chore: update xdesign basic tokens (#1071)
This commit is contained in:
GitHub
parent
1febd77f6a
commit
34c3295ebe
|
|
@ -2,58 +2,58 @@ export const tinyBaseSmbTheme = {
|
|||
/* 基础色 */
|
||||
|
||||
// 品牌色
|
||||
'ti-base-color-brand': '#191919',
|
||||
'ti-base-color-brand-1': '#595959',
|
||||
'ti-base-color-brand-2': '#1476FF',
|
||||
'ti-base-color-brand-3': '#7693F5',
|
||||
'ti-base-color-brand-4': '#96ADFA',
|
||||
'ti-base-color-brand-5': '#C2C2C2',
|
||||
'ti-base-color-brand-6': 'var(--ti-base-color-brand)',
|
||||
'ti-base-color-brand-7': '#1476FF80', // 50% 透明度
|
||||
'ti-base-color-brand-8': '#1476ff26', // 15% 透明度 4.28修改
|
||||
'ti-base-color-brand-9': '#80808080', // 50% 透明度
|
||||
'ti-base-color-brand': '#191919', // 主色黑/链接颜色
|
||||
'ti-base-color-brand-1': '#595959', // 主色悬浮色、链接悬浮色
|
||||
'ti-base-color-brand-2': '#1476FF', // 文字按钮色、文字按钮悬浮色
|
||||
'ti-base-color-brand-3': '#7693F5', // 深色背景下图标
|
||||
'ti-base-color-brand-4': '#96ADFA', // 深色背景链接色
|
||||
'ti-base-color-brand-5': '#C2C2C2', // 选块悬浮色/页签禁用文字色
|
||||
'ti-base-color-brand-6': '#F5F5F5', // 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
|
||||
'ti-base-color-brand-7': '#B3D6FF', // 开关组件“开”禁用背景色
|
||||
'ti-base-color-brand-8': '#DEECFF', // 日期选择悬浮背景色
|
||||
'ti-base-color-brand-9': '#DBDBDB', // 开关组件“关”禁用背景色
|
||||
|
||||
// 中立色
|
||||
'ti-base-color-common': '#191919',
|
||||
'ti-base-color-common-1': '#595959',
|
||||
'ti-base-color-common-2': '#808080',
|
||||
'ti-base-color-common-3': '#C2C2C2',
|
||||
'ti-base-color-common-4': '#DBDBDB',
|
||||
'ti-base-color-common-5': '#00000014', // 新风格专用，分隔线 8% 透明度
|
||||
'ti-base-color-common-6': '#00000026', // 15%透明度 4.28新增
|
||||
'ti-base-color-bg': '#F5F5F5',
|
||||
'ti-base-color-bg-1': '#0000000D', // 5% 透明度
|
||||
'ti-base-color-bg-2': '#FAFAFA',
|
||||
'ti-base-color-bg-3': '#191919',
|
||||
'ti-base-color-bg-4': '#595959',
|
||||
'ti-base-color-bg-5': '#FFFFFF',
|
||||
'ti-base-color-bg-6': '#5959591A', // 10% 透明度
|
||||
'ti-base-color-bg-7': '#00000000',
|
||||
'ti-base-color-common': '#191919', // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
|
||||
'ti-base-color-common-1': '#595959', // 次要信息/图标默认
|
||||
'ti-base-color-common-2': '#808080', // 弱化信息、说明文字
|
||||
'ti-base-color-common-3': '#C2C2C2', // 边框色（如下拉、输入框）/文字禁用/禁用图标
|
||||
'ti-base-color-common-4': '#DBDBDB', // 禁用描边
|
||||
'ti-base-color-common-5': '#F0F0F0', // 白色背景分割线
|
||||
'ti-base-color-common-6': '#DBDBDB', // 灰色背景分割线
|
||||
'ti-base-color-bg': '#F5F5F5', // 通用背景-页面背景色
|
||||
'ti-base-color-bg-1': '#F0F0F0', // 禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
|
||||
'ti-base-color-bg-2': '#FAFAFA', // 新区域组件-悬浮背景色
|
||||
'ti-base-color-bg-3': '#191919', // 主要按钮-背景色
|
||||
'ti-base-color-bg-4': '#595959', // 主要按钮-hover/Focus背景色
|
||||
'ti-base-color-bg-5': '#FFFFFF', // 顶部导航背景色、 顶部导航下拉背景色
|
||||
'ti-base-color-bg-6': '#F5F5F5', // 标签背景色
|
||||
'ti-base-color-bg-7': '#FFFFFF', // 次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
|
||||
|
||||
// 功能色
|
||||
'ti-base-color-success-bg': '#5CB3001A', // 10% 透明度
|
||||
'ti-base-color-success-border': '#5CB3001A', // 10% 透明度
|
||||
'ti-base-color-success': '#5CB300',
|
||||
'ti-base-color-success-text': '#5CB300',
|
||||
'ti-base-color-error-bg': '#F230301A', // 10% 透明度
|
||||
'ti-base-color-error-border': '#F230301A', // 10% 透明度
|
||||
'ti-base-color-error': '#F23030',
|
||||
'ti-base-color-error-text': '#F23030',
|
||||
'ti-base-color-warn-bg': '#FF88001A', // 10% 透明度
|
||||
'ti-base-color-warn-border': '#FF88001A', // 10% 透明度
|
||||
'ti-base-color-warn': '#FF8800',
|
||||
'ti-base-color-warn-text': '#FF8800',
|
||||
'ti-base-color-prompt-bg': '#1476FF1A', // 10% 透明度
|
||||
'ti-base-color-prompt-border': '#1476FF1A', // 10% 透明度
|
||||
'ti-base-color-prompt': '#1476FF',
|
||||
'ti-base-color-prompt-text': '#1476FF',
|
||||
'ti-base-color-success-bg': '#E6F2D5', // 成功-背景色
|
||||
'ti-base-color-success-border': '#E6F2D5', // 成功-边框色
|
||||
'ti-base-color-success': '#5CB300', // 成功-图标色
|
||||
'ti-base-color-success-text': '#5CB300', // 成功-文本色
|
||||
'ti-base-color-error-bg': '#FCE3E1', // 错误-背景色/错误校验背景色
|
||||
'ti-base-color-error-border': '#FCE3E1', // 错误-边框色
|
||||
'ti-base-color-error': '#F23030', // 错误-图标色、校验边框色/、悬浮菜单背景色
|
||||
'ti-base-color-error-text': '#F23030', // 错误-文本色/交易金额色
|
||||
'ti-base-color-warn-bg': '#FFEBD1', // 告警-背景色
|
||||
'ti-base-color-warn-border': '#FFEBD1', // 告警-边框色
|
||||
'ti-base-color-warn': '#FF8800', // 告警-图标色、深色背景-运营活动文本色
|
||||
'ti-base-color-warn-text': '#FF8800', // 告警-文本色
|
||||
'ti-base-color-prompt-bg': '#DEECFF', // 提示-背景色
|
||||
'ti-base-color-prompt-border': '#DEECFF', // 提示-边框色
|
||||
'ti-base-color-prompt': '#1476FF', // 提示-图标色
|
||||
'ti-base-color-prompt-text': '#1476FF', // 提示-文本色
|
||||
'ti-base-color-error-icon-from': '#FF41A1',
|
||||
'ti-base-color-error-icon-to': '#FF8A5B',
|
||||
'ti-base-color-warn-icon-from': '#FF5541',
|
||||
'ti-base-color-warn-icon-to': '#FFD347',
|
||||
'ti-base-color-prompt-icon-from': '#7769E8',
|
||||
'ti-base-color-prompt-icon-to': '#58BBFF',
|
||||
'ti-base-color-warn-1': '#F7D916',
|
||||
'ti-base-color-warn-1': '#FFB700',
|
||||
'ti-base-color-icon-info': '#1476FF',
|
||||
'ti-base-color-data-3': '#6E51E0',
|
||||
'ti-base-color-data-4': '#5CB300',
|
||||
|
|
@ -97,13 +97,13 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-link': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-text-link-hover': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-text-link': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-link-hover': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-text-important': 'var(--ti-base-base-color-error-text)',
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)',
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-common)',
|
||||
|
|
@ -115,10 +115,10 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-color-icon-active': 'var(--ti-base-color-common)', // 5.12修改
|
||||
'ti-common-color-icon-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-graybg-hover': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-icon-graybg-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-graybg-hover': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-icon-graybg-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-3)',
|
||||
|
|
@ -131,8 +131,8 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-color-line-active': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-common)',
|
||||
|
||||
// 背景色
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg)',
|
||||
|
|
@ -140,7 +140,7 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-2)',
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-bg-primary': 'var(--ti-base-color-bg-3)',
|
||||
'ti-common-color-bg-primary-hover': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-color-bg-primary-active': 'var(--ti-base-color-bg-4)',
|
||||
|
|
@ -148,13 +148,13 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-color-bg-minor-hover': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-minor-active': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-navigation': 'var(--ti-base-color-bg-5)',
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-white-emphasize': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-brand-9)',
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-base-color-bg-normal)',
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-white)',
|
||||
|
|
@ -207,18 +207,18 @@ export const tinyBaseSmbTheme = {
|
|||
'ti-common-shadow-1-down': '0 1px 3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-1-left': '-1px 0px3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-1-right': '1px 0px 3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-up': ' 0 -2px 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-down': '0 2px 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-left': '-2px 0 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-right': '2px 0 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-up': '0 -2px 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-down': '0 2px 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-left': '-2px 0 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-right': '2px 0 12px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-up': '0 -4px 22px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-down': '0 4px 22px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-left': '-4px 0 22px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-right': '4px 0 22px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-up': '0 -2px 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-down': '0 2px 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-left': '-2px 0 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-right': '2px 0 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-up': '0 -8px 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-down': '0 8px 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-left': '-8px 0 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-right': '8px 0 24px 0 rgba(0,0,0,0.16)',
|
||||
|
||||
/* 圆角 */
|
||||
'ti-common-border-radius-normal': 'var(--ti-common-border-radius-3)',
|
||||
|
|
|
|||
Loading…
Reference in New Issue