From 34c3295ebe136220ff02be2a2db4a140a83a94ce Mon Sep 17 00:00:00 2001 From: Kagol Date: Sun, 10 Dec 2023 10:45:28 +0800 Subject: [PATCH] chore: update xdesign basic tokens (#1071) --- packages/theme/src/theme/smb-theme/index.js | 138 ++++++++++---------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/packages/theme/src/theme/smb-theme/index.js b/packages/theme/src/theme/smb-theme/index.js index 6061a6b85..df73b1486 100644 --- a/packages/theme/src/theme/smb-theme/index.js +++ b/packages/theme/src/theme/smb-theme/index.js @@ -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)',