@opentiny/vue-theme 3.17.3 → 3.17.4

package/_dist/theme/smb-theme/index.js

@@ -0,0 +1,455 @@
+export const tinyBaseSmbTheme = {
+  /* 基础色 */
+
+  // 品牌色
+  'tvue-base-color-brand': '#191919', // 主色黑/链接颜色
+  'tvue-base-color-brand-1': '#595959', // 主色悬浮色、链接悬浮色
+  'tvue-base-color-brand-2': '#1476FF', // 文字按钮色、文字按钮悬浮色
+  'tvue-base-color-brand-3': '#7693F5', // 深色背景下图标
+  'tvue-base-color-brand-4': '#96ADFA', // 深色背景链接色
+  'tvue-base-color-brand-5': '#C2C2C2', // 选块悬浮色/页签禁用文字色
+  'tvue-base-color-brand-6': '#F5F5F5', // 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
+  'tvue-base-color-brand-7': '#B3D6FF', // 开关组件“开”禁用背景色
+  'tvue-base-color-brand-8': '#DEECFF', // 日期选择悬浮背景色
+  'tvue-base-color-brand-9': '#DBDBDB', // 开关组件“关”禁用背景色
+
+  // 中立色
+  'tvue-base-color-common': '#191919', // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
+  'tvue-base-color-common-1': '#595959', // 次要信息/图标默认
+  'tvue-base-color-common-2': '#808080', // 弱化信息、说明文字
+  'tvue-base-color-common-3': '#C2C2C2', // 边框色（如下拉、输入框）/文字禁用/禁用图标
+  'tvue-base-color-common-4': '#DBDBDB', // 禁用描边
+  'tvue-base-color-common-5': '#F0F0F0', // 白色背景分割线
+  'tvue-base-color-common-6': '#DBDBDB', // 灰色背景分割线
+  'tvue-base-color-bg': '#F5F5F5', // 通用背景-页面背景色
+  'tvue-base-color-bg-1': '#F0F0F0', // 禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
+  'tvue-base-color-bg-2': '#FAFAFA', // 新区域组件-悬浮背景色
+  'tvue-base-color-bg-3': '#191919', // 主要按钮-背景色
+  'tvue-base-color-bg-4': '#595959', // 主要按钮-hover/Focus背景色
+  'tvue-base-color-bg-5': '#FFFFFF', // 顶部导航背景色、 顶部导航下拉背景色
+  'tvue-base-color-bg-6': '#F5F5F5', // 标签背景色
+  'tvue-base-color-bg-7': '#FFFFFF', // 次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
+
+  // 功能色
+  'tvue-base-color-success-bg': '#E6F2D5', // 成功-背景色
+  'tvue-base-color-success-border': '#E6F2D5', // 成功-边框色
+  'tvue-base-color-success': '#5CB300', // 成功-图标色
+  'tvue-base-color-success-text': '#5CB300', // 成功-文本色
+  'tvue-base-color-error-bg': '#FCE3E1', // 错误-背景色/错误校验背景色
+  'tvue-base-color-error-border': '#FCE3E1', // 错误-边框色
+  'tvue-base-color-error': '#F23030', // 错误-图标色、校验边框色/、悬浮菜单背景色
+  'tvue-base-color-error-text': '#F23030', // 错误-文本色/交易金额色
+  'tvue-base-color-warn-bg': '#FFEBD1', // 告警-背景色
+  'tvue-base-color-warn-border': '#FFEBD1', // 告警-边框色
+  'tvue-base-color-warn': '#FF8800', // 告警-图标色、深色背景-运营活动文本色
+  'tvue-base-color-warn-text': '#FF8800', // 告警-文本色
+  'tvue-base-color-prompt-bg': '#DEECFF', // 提示-背景色
+  'tvue-base-color-prompt-border': '#DEECFF', // 提示-边框色
+  'tvue-base-color-prompt': '#1476FF', // 提示-图标色
+  'tvue-base-color-prompt-text': '#1476FF', // 提示-文本色
+  'tvue-base-color-error-icon-from': '#FF41A1',
+  'tvue-base-color-error-icon-to': '#FF8A5B',
+  'tvue-base-color-warn-icon-from': '#FF5541',
+  'tvue-base-color-warn-icon-to': '#FFD347',
+  'tvue-base-color-prompt-icon-from': '#7769E8',
+  'tvue-base-color-prompt-icon-to': '#58BBFF',
+  'tvue-base-color-warn-1': '#FFB700',
+  'tvue-base-color-icon-info': '#1476FF',
+  'tvue-base-color-data-3': '#6E51E0',
+  'tvue-base-color-data-4': '#5CB300',
+  'tvue-base-color-data-5': '#FCBE1E',
+  'tvue-base-color-data-2': '#0BB8B2', // 新风格专用
+  'tvue-base-color-data-6': '#33BCF2', // 新风格专用
+  'tvue-base-color-data-7': '#BA53E6', // 新风格专用
+  'tvue-base-color-data-8': '#EB4696', // 新风格专用
+
+  /* 场景色 */
+
+  // 功能色
+  'tvue-common-color-success-bg': 'var(--tvue-base-color-success-bg)',
+  'tvue-common-color-success-border': 'var(--tvue-base-color-success-border)',
+  'tvue-common-color-success': 'var(--tvue-base-color-success)',
+  'tvue-common-color-text-success': 'var(--tvue-base-color-success-text)',
+  'tvue-common-color-error-bg': 'var(--tvue-base-color-error-bg)',
+  'tvue-common-color-error-border': 'var(--tvue-base-color-error)',
+  'tvue-common-color-error-border-secondary': 'var(--tvue-base-color-error-border)',
+  'tvue-common-color-error': 'var(--tvue-base-color-error)',
+  'tvue-common-color-error-text': 'var(--tvue-base-color-error-text)',
+  'tvue-common-color-warn-bg': 'var(--tvue-base-color-warn-bg)',
+  'tvue-common-color-warn-border': 'var(--tvue-base-color-warn-border)',
+  'tvue-common-color-warn': 'var(--tvue-base-color-warn)',
+  'tvue-common-color-warn-text': 'var(--tvue-base-color-warn-text)',
+  'tvue-common-color-prompt-bg': 'var(--tvue-base-color-prompt-bg)',
+  'tvue-common-color-prompt-border': 'var(--tvue-base-color-prompt-border)',
+  'tvue-common-color-prompt': 'var(--tvue-base-color-prompt)',
+  'tvue-common-color-prompt-text': 'var(--tvue-base-color-prompt-text)',
+  'tvue-common-color-warn-secondary': 'var(--tvue-base-color-warn-1)',
+
+  // 文本色
+  'tvue-common-color-error-icon-from': 'var(--tvue-base-color-error-icon-from)',
+  'tvue-common-color-error-icon-to': 'var(--tvue-base-color-error-icon-to)',
+  'tvue-common-color-warn-icon-from': 'var(--tvue-base-color-warn-icon-from)',
+  'tvue-common-color-warn-icon-to': 'var(--tvue-base-color-warn-icon-to)',
+  'tvue-common-color-prompt-icon-from': 'var(--tvue-base-color-prompt-icon-from)',
+  'tvue-common-color-prompt-icon-to': 'var(--tvue-base-color-prompt-icon-to)',
+  'tvue-common-color-text-primary': 'var(--tvue-base-color-common)',
+  'tvue-common-color-text-secondary': 'var(--tvue-base-color-common-1)',
+  'tvue-common-color-text-weaken': 'var(--tvue-base-color-common-2)',
+  'tvue-common-color-text-disabled': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-text-highlight': 'var(--tvue-base-color-brand-2)',
+  'tvue-common-color-text-link': 'var(--tvue-base-color-brand-2)',
+  'tvue-common-color-text-link-hover': 'var(--tvue-base-color-brand-2)',
+  'tvue-common-color-text-white': 'var(--tvue-base-color-white)',
+  'tvue-common-color-text-darkbg': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-text-darkbg-disabled': 'var(--tvue-base-color-common-1)',
+  'tvue-common-color-text-gray-disabled': 'var(--tvue-base-color-brand-3)',
+  'tvue-common-color-text-important': 'var(--tvue-base-color-common)',
+  'tvue-common-color-text-link-darkbg': 'var(--tvue-base-color-brand-4)',
+  'tvue-common-color-text-link-darkbg-hover': 'var(--tvue-base-color-brand-5)',
+  'tvue-common-color-text-gray': 'var(--tvue-base-color-common)',
+
+  // 图标色
+  'tvue-common-color-icon': 'var(--tvue-base-color-common)', // 5.12新增
+  'tvue-common-color-icon-normal': 'var(--tvue-base-color-common-2)', // 5.12修改
+  'tvue-common-color-icon-hover': 'var(--tvue-base-color-common)', // 5.12修改
+  'tvue-common-color-icon-active': 'var(--tvue-base-color-common)', // 5.12修改
+  'tvue-common-color-icon-disabled': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-icon-white': 'var(--tvue-base-color-white)',
+  'tvue-common-color-icon-graybg-normal': 'var(--tvue-base-color-common-2)',
+  'tvue-common-color-icon-graybg-hover': 'var(--tvue-base-color-common)',
+  'tvue-common-color-icon-graybg-active': 'var(--tvue-base-color-common)',
+  'tvue-common-color-icon-graybg-disabled': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-icon-darkbg-normal': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-icon-darkbg-hover': 'var(--tvue-base-color-brand-3)',
+  'tvue-common-color-icon-darkbg-active': 'var(--tvue-base-color-brand-3)',
+  'tvue-common-color-icon-darkbg-disabled': 'var(--tvue-base-color-common-1)',
+  'tvue-common-color-icon-info': 'var(--tvue-base-color-icon-info)',
+
+  // 线条色
+  'tvue-common-color-line-normal': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-line-hover': 'var(--tvue-base-color-common)',
+  'tvue-common-color-line-active': 'var(--tvue-base-color-common)',
+  'tvue-common-color-line-disabled': 'var(--tvue-base-color-common-4)',
+  'tvue-common-color-line-dividing': 'var(--tvue-base-color-common-5)',
+  'tvue-common-color-dash-line-normal': 'var(--tvue-base-color-common)',
+  'tvue-common-color-dash-line-hover': 'var(--tvue-base-color-common)',
+
+  // 背景色
+  'tvue-common-color-bg-normal': 'var(--tvue-base-color-bg)',
+  'tvue-common-color-bg-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-bg-emphasize': 'var(--tvue-base-color-brand)',
+  'tvue-common-color-bg-hover': 'var(--tvue-base-color-brand-1)',
+  'tvue-common-color-bg-gray': 'var(--tvue-base-color-bg-2)',
+  'tvue-common-color-bg-secondary': 'var(--tvue-base-color-common-3)',
+  'tvue-common-color-bg-primary': 'var(--tvue-base-color-bg-3)',
+  'tvue-common-color-bg-primary-hover': 'var(--tvue-base-color-bg-4)',
+  'tvue-common-color-bg-primary-active': 'var(--tvue-base-color-bg-4)',
+  'tvue-common-color-bg-minor': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-minor-hover': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-minor-active': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-navigation': 'var(--tvue-base-color-bg-5)',
+  'tvue-common-color-bg-white-normal': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-white-emphasize': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-bg-light-normal': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-bg-light-emphasize': 'var(--tvue-base-color-brand-7)',
+  'tvue-common-color-bg-dark-normal': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-dark-emphasize': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-dark-active': 'var(--tvue-base-color-bg-7)',
+  'tvue-common-color-bg-dark-disabled': 'var(--tvue-base-color-common-4)',
+  'tvue-common-color-bg-dark-deep': 'var(--tvue-base-color-white)',
+  'tvue-common-color-bg-dark-select': 'var(--tvue-base-color-white)',
+
+  // 补全默认主题变量名，因cfui组件使用到了此变量名，因为需要映射一下
+  'tvue-common-bg-primary': 'var(--tvue-common-color-bg-primary)',
+  'tvue-common-bg-primary-hover': 'var(--tvue-common-color-bg-primary-hover)',
+  'tvue-common-bg-primary-active': 'var(--tvue-common-color-bg-primary-active)',
+  'tvue-common-color-bg-6': 'var(--tvue-base-color-bg-6)', // smb新增标签背景色
+
+  // 图表色
+  'tvue-common-color-data-1': 'var(--tvue-base-color-icon-info)',
+  'tvue-common-color-data-2': 'var(--tvue-base-color-data-2)',
+  'tvue-common-color-data-3': 'var(--tvue-base-color-data-3)',
+  'tvue-common-color-data-4': 'var(--tvue-base-color-data-4)',
+  'tvue-common-color-data-5': 'var(--tvue-base-color-data-5)',
+  'tvue-common-color-data-6': 'var(--tvue-base-color-data-6)',
+  'tvue-common-color-data-7': 'var(--tvue-base-color-data-7)',
+  'tvue-common-color-data-8': 'var(--tvue-base-color-data-8)',
+
+  /* 字号 */
+  'tvue-common-font-size-base': '14px', // 正文
+  'tvue-common-font-size-0': '12px', // 辅助文本
+  'tvue-common-font-size-1': '14px',
+  'tvue-common-font-size-2': '16px',
+  'tvue-common-font-size-3': '18px',
+  'tvue-common-font-size-4': '20px',
+  'tvue-common-font-size-5': '24px',
+  'tvue-common-font-size-6': '32px',
+  'tvue-common-font-size-7': '36px',
+  'tvue-common-font-size-8': '40px',
+  'tvue-common-font-size-9': '48px',
+  'tvue-common-font-size-10': '56px',
+  'tvue-common-line-number': '1.5',
+
+  /* 字体 */
+  'tvue-common-font-family':
+    '"Helvetica", "Arial", "PingFangSC-Regular", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei"',
+
+  /* 间距 */
+  'tvue-common-space-base': '4px',
+  'tvue-common-space-2x': 'calc(var(--tvue-common-space-base) * 2)',
+  'tvue-common-space-3x': 'calc(var(--tvue-common-space-base) * 3)',
+  'tvue-common-space-4x': 'calc(var(--tvue-common-space-base) * 4)',
+  'tvue-common-space-5x': 'calc(var(--tvue-common-space-base) * 5)',
+  'tvue-common-space-6x': 'calc(var(--tvue-common-space-base) * 6)',
+  'tvue-common-space-8x': 'calc(var(--tvue-common-space-base) * 8)',
+  'tvue-common-space-10x': 'calc(var(--tvue-common-space-base) * 10)',
+  'tvue-common-space-6': '6px',
+  'tvue-common-space-10': '10px',
+  'tvue-common-space-0': '0px',
+  'tvue-common-space-2': '2px',
+
+  /* 阴影 */
+  'tvue-common-shadow-1-up': '0 -1px 3px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-1-down': '0 1px 3px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-1-left': '-1px 0px3px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-1-right': '1px 0px 3px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-2-up': '0 -2px 12px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-2-down': '0 2px 12px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-2-left': '-2px 0 12px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-2-right': '2px 0 12px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-3-up': '0 -4px 16px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-3-down': '0 4px 16px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-3-left': '-4px 0 16px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-3-right': '4px 0 16px 0 rgba(0,0,0,0.08)',
+  'tvue-common-shadow-4-up': '0 -8px 24px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-4-down': '0 8px 24px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-4-left': '-8px 0 24px 0 rgba(0,0,0,0.16)',
+  'tvue-common-shadow-4-right': '8px 0 24px 0 rgba(0,0,0,0.16)',
+
+  /* 圆角 */
+  'tvue-common-border-radius-normal': 'var(--tvue-common-border-radius-3)',
+  'tvue-common-border-radius-1': '2px',
+  'tvue-common-border-radius-2': '4px',
+  'tvue-common-border-radius-3': '6px',
+  'tvue-common-border-radius-4': '8px',
+  'tvue-common-border-radius-5': '12px',
+  'tvue-common-border-radius-6': '16px',
+  'tvue-common-border-radius-7': '24px',
+  'tvue-common-border-radius-8': '32px',
+  'tvue-common-border-radius-9': '48px',
+  'tvue-common-border-radius-10': '100px',
+
+  /* 2023.4.17 新增 */
+
+  /* 主要 */
+  'tvue-common-color-primary-normal': 'var(--tvue-base-color-brand)',
+  'tvue-common-color-primary-hover': 'var(--tvue-base-color-brand-1)',
+  'tvue-common-color-primary-active': 'var(--tvue-base-color-brand-1)',
+  'tvue-common-color-primary-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-primary-disabled-border': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-primary-disabled-text': 'var(--tvue-base-color-common-3)',
+
+  /* 成功 */
+  'tvue-common-color-success-normal': 'var(--tvue-base-color-success)',
+  'tvue-common-color-success-hover': '#b9e683',
+  'tvue-common-color-success-active': '#b9e683',
+  'tvue-common-color-success-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-success-disabled-border': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-success-disabled-text': 'var(--tvue-base-color-common-3)',
+
+  /* 警告 */
+  'tvue-common-color-warning-normal': 'var(--tvue-base-color-warn)',
+  'tvue-common-color-warning-hover': '#fcc98b',
+  'tvue-common-color-warning-active': '#fcc98b',
+  'tvue-common-color-warning-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-warning-disabled-border': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-warning-disabled-text': 'var(--tvue-base-color-common-3)',
+
+  /*  失败 */
+  'tvue-common-color-danger-normal': 'var(--tvue-base-color-error)',
+  'tvue-common-color-danger-hover': '#faa9a5',
+  'tvue-common-color-danger-active': '#faa9a5',
+  'tvue-common-color-danger-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-danger-disabled-border': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-danger-disabled-text': 'var(--tvue-base-color-common-3)',
+
+  /* 信息 */
+  'tvue-common-color-info-normal': 'var(--tvue-base-color-common)',
+  'tvue-common-color-info-hover': 'var(--tvue-base-color-common-1)',
+  'tvue-common-color-info-active': 'var(--tvue-base-color-common-1)',
+  'tvue-common-color-info-disabled': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-info-disabled-border': 'var(--tvue-base-color-bg-1)',
+  'tvue-common-color-info-disabled-text': 'var(--tvue-base-color-common-3)',
+
+  'tvue-common-color-light': 'var(--tvue-base-color-bg-5)',
+  'tvue-common-color-dark': '#000',
+
+  /* 边框/分割线颜色 */
+  'tvue-common-color-border': '#999999',
+  'tvue-common-color-border-hover': 'var(--tvue-base-color-brand)',
+
+  /* 背景色 */
+  'tvue-common-color-hover-background': 'var(--tvue-base-color-bg);',
+  'tvue-common-color-selected-background': 'var(--tvue-base-color-bg)',
+
+  /* 文本色 */
+  'tvue-common-color-selected-text-color': 'var(--tvue-base-color-brand)',
+  'tvue-common-color-placeholder': 'var(--tvue-base-color-common-2)',
+
+  /* 间距 */
+  'tvue-common-dropdown-gap': '4px',
+
+  /* 字重 */
+  'tvue-common-font-weight-light': '100',
+  'tvue-common-font-weight-normal': '400',
+  'tvue-common-font-weight-bold': '600',
+
+  /* 字体 */
+  'tvue-common-font-family-normal': 'var(--tvue-common-font-family)',
+
+  /* 宽 */
+  'tvue-common-size-width-large': '152px',
+  'tvue-common-size-width-medium': '120px',
+  'tvue-common-size-width-normal': '104px', // Default
+  'tvue-common-size-width-small': '80px',
+  'tvue-common-size-width-minor': '30px',
+  'tvue-common-size-width-mini': '24px',
+
+  /* 高 */
+  'tvue-common-size-height-large': '48px',
+  'tvue-common-size-height-medium': '40px',
+  'tvue-common-size-height-normal': '32px', // Default
+  'tvue-common-size-height-small': '24px',
+  'tvue-common-size-height-minor': '30px',
+  'tvue-common-size-height-mini': '24px',
+
+  /* 行高 */
+  'tvue-common-line-height-base': '18px', // 跟字号对应
+  'tvue-common-line-height-1': '22px',
+  'tvue-common-line-height-2': '24px',
+  'tvue-common-line-height-3': '28px',
+  'tvue-common-line-height-4': '30px',
+  'tvue-common-line-height-5': '36px',
+  'tvue-common-line-height-6': '48px',
+  'tvue-common-line-height-7': '54px',
+  'tvue-common-line-height-8': '60px',
+  'tvue-common-line-height-9': '72px',
+  'tvue-common-line-height-10': '84px',
+
+  /*  滚动条 */
+  'tvue-common-scrollbar-width': '8px',
+  'tvue-common-scrollbar-height': '8px',
+  'tvue-common-scrollbar-track-piece-bg-color': 'var(--tvue-base-color-bg-5)',
+  'tvue-common-scrollbar-thumb-bg-color': 'var(--tvue-base-color-common-4)',
+  'tvue-common-scrollbar-thumb-border-radius': '4px',
+  'tvue-common-scrollbar-thumb-hover-bg-color': 'var(--tvue-base-color-common-4)',
+  'tvue-common-scrollbar-thumb-active-bg-color': 'var(--tvue-base-color-common-4)',
+
+  // 以下皆为新增变量
+  // 新增smb缺少的basic-var.less变量
+  // 新增尺寸
+  'tvue-common-size-base': '4px',
+  'tvue-common-size-2x': 'calc(var(--tvue-common-size-base) * 2)',
+  'tvue-common-size-3x': 'calc(var(--tvue-common-size-base) * 3)',
+  'tvue-common-size-4x': 'calc(var(--tvue-common-size-base) * 4)',
+  'tvue-common-size-5x': 'calc(var(--tvue-common-size-base) * 5)',
+  'tvue-common-size-6x': 'calc(var(--tvue-common-size-base) * 6)',
+  'tvue-common-size-7x': 'calc(var(--tvue-common-size-base) * 7)',
+  'tvue-common-size-8x': 'calc(var(--tvue-common-size-base) * 8)',
+  'tvue-common-size-9x': 'calc(var(--tvue-common-size-base) * 9)',
+  'tvue-common-size-10x': 'calc(var(--tvue-common-size-base) * 10)',
+  'tvue-common-size-11x': 'calc(var(--tvue-common-size-base) * 11)',
+  'tvue-common-size-12x': 'calc(var(--tvue-common-size-base) * 12)',
+  'tvue-common-size-13x': 'calc(var(--tvue-common-size-base) * 13)',
+  'tvue-common-size-14x': 'calc(var(--tvue-common-size-base) * 14)',
+  'tvue-common-size-15x': 'calc(var(--tvue-common-size-base) * 15)',
+  'tvue-common-size-16x': 'calc(var(--tvue-common-size-base) * 16)',
+  'tvue-common-size-17x': 'calc(var(--tvue-common-size-base) * 17)',
+  'tvue-common-size-18x': 'calc(var(--tvue-common-size-base) * 18)',
+  'tvue-common-size-19x': 'calc(var(--tvue-common-size-base) * 19)',
+  'tvue-common-size-20x': 'calc(var(--tvue-common-size-base) * 20)',
+  'tvue-common-size-21x': 'calc(var(--tvue-common-size-base) * 21)',
+  'tvue-common-size-22x': 'calc(var(--tvue-common-size-base) * 22)',
+  'tvue-common-size-23x': 'calc(var(--tvue-common-size-base) * 23)',
+  'tvue-common-size-24x': 'calc(var(--tvue-common-size-base) * 24)',
+  'tvue-common-size-25x': 'calc(var(--tvue-common-size-base) * 25)',
+  'tvue-common-size-26x': 'calc(var(--tvue-common-size-base) * 26)',
+  'tvue-common-size-27x': 'calc(var(--tvue-common-size-base) * 27)',
+  'tvue-common-size-28x': 'calc(var(--tvue-common-size-base) * 28)',
+  'tvue-common-size-29x': 'calc(var(--tvue-common-size-base) * 29)',
+  'tvue-common-size-30x': 'calc(var(--tvue-common-size-base) * 30)',
+  'tvue-common-size-31x': 'calc(var(--tvue-common-size-base) * 31)',
+  'tvue-common-size-32x': 'calc(var(--tvue-common-size-base) * 32)',
+  'tvue-common-size-33x': 'calc(var(--tvue-common-size-base) * 33)',
+  'tvue-common-size-34x': 'calc(var(--tvue-common-size-base) * 34)',
+  'tvue-common-size-35x': 'calc(var(--tvue-common-size-base) * 35)',
+  'tvue-common-size-36x': 'calc(var(--tvue-common-size-base) * 36)',
+  'tvue-common-size-37x': 'calc(var(--tvue-common-size-base) * 37)',
+  'tvue-common-size-38x': 'calc(var(--tvue-common-size-base) * 38)',
+  'tvue-common-size-39x': 'calc(var(--tvue-common-size-base) * 39)',
+  'tvue-common-size-40x': 'calc(var(--tvue-common-size-base) * 40)',
+  'tvue-common-size-41x': 'calc(var(--tvue-common-size-base) * 41)',
+  'tvue-common-size-42x': 'calc(var(--tvue-common-size-base) * 42)',
+  'tvue-common-size-43x': 'calc(var(--tvue-common-size-base) * 43)',
+  'tvue-common-size-44x': 'calc(var(--tvue-common-size-base) * 44)',
+  'tvue-common-size-45x': 'calc(var(--tvue-common-size-base) * 45)',
+  'tvue-common-size-46x': 'calc(var(--tvue-common-size-base) * 46)',
+  'tvue-common-size-47x': 'calc(var(--tvue-common-size-base) * 47)',
+  'tvue-common-size-48x': 'calc(var(--tvue-common-size-base) * 48)',
+  'tvue-common-size-49x': 'calc(var(--tvue-common-size-base) * 49)',
+  'tvue-common-size-50x': 'calc(var(--tvue-common-size-base) * 50)',
+
+  // 透明度颜色：主要用于边框色，背景色
+  'tvue-base-bg-color-transparent-5': '#0000000D', // 5% 等于 rgba(0, 0, 0, 0.05)
+  'tvue-base-bg-color-transparent-8': 'rgba(0,0,0,0.08)',
+  'tvue-base-bg-color-transparent-15': 'rgba(0,0,0,0.15)',
+  'tvue-base-bg-color-transparent-40': 'rgba(0, 0, 0, 0.4)',
+  'tvue-base-bg-color-transparent-50': '#C2C2C280',
+  'tvue-base-bg-color-loading-transparent-50': 'rgba(255, 255, 255, 0.5)',
+  'tvue-base-bg-color-disabled-transparent-5': 'rgba(0,0,0,0.05)',
+
+  // 文本色
+  'tvue-base-text-color-1': '#F76360',
+  'tvue-base-text-color-2': '#F2F2F2',
+
+  'tvue-base-font-family': '"Manrop","Manrope-Medium"',
+
+  // 新增阴影
+  'tvue-base-box-shadow-1': '0px 2px 12px 0px rgba(0,0,0,0.08)',
+
+  // 新属性变量
+  'tvue-base-text-decoration-underline': 'underline',
+  'tvue-base-display-block': 'block',
+  'tvue-base-opacity-10': '1',
+
+  'tvue-common-color-transparent': 'var(--tvue-base-color-transparent)',
+  'tvue-common-font-weight-4': 'normal',
+  'tvue-common-border-weight-normal': '1px',
+  'tvue-common-size-0': '0px',
+  'tvue-common-size-auto': 'auto',
+  'tvue-common-font-weight-6': '600',
+  'tvue-common-border-radius-0': '0px',
+  'tvue-common-border-weight-1': '2px',
+  'tvue-common-line-height-number': '1.5',
+
+  // 新属性变量
+  'tvue-common-text-decoration-underline': 'var(--tvue-base-text-decoration-underline)',
+  'tvue-common-display-block': 'var(--tvue-base-display-block)',
+  'tvue-common-opacity-1': 'var(--tvue-base-opacity-10)',
+
+  'tvue-common-bg-color-active': 'var(--tvue-base-bg-color-transparent-5)', // 活跃背景色
+  'tvue-common-bg-color-hover-40': 'var(--tvue-base-bg-color-transparent-40)',
+  'tvue-common-bg-color-transparent-15': 'var(--tvue-base-bg-color-transparent-15)', // 活跃背景色
+  'tvue-common-bg-color-transparent-50': 'var(--tvue-base-bg-color-transparent-50)', // 禁用背景色
+  'tvue-common-bg-color-loading-transparent-50': 'var(--tvue-base-bg-color-loading-transparent-50)', // 加载中背景色
+  'tvue-common-bg-color-disabled-transparent-5': 'var(--tvue-base-bg-color-disabled-transparent-5)', // 禁用背景色
+  'tvue-common-text-color-active': 'var(--tvue-base-text-color-1)', // 文本色
+  'tvue-common-box-shadow-popover': 'var(--tvue-base-box-shadow-1)', // 弹出框阴影
+  'tvue-common-text-color-disabled': 'var(--tvue-base-text-color-2)', // 禁用色
+
+  'tvue-common-border-color-transparent-8': 'var(--tvue-base-bg-color-transparent-8)', // 折叠框边框色
+
+  'tvue-common-input-font-family': 'var(--tvue-base-font-family)' // 输入框字体
+}
+
+export * from './component.js'

package/_dist/theme-tool.d.ts

@@ -0,0 +1,15 @@
+interface ThemeData {
+  id: string
+  name: string
+  cnName: string
+  data: object
+}
+
+export default class TinyThemeTool {
+  currentTheme: string
+  contentElement: HTMLElement
+  styleSheetId: string
+  defaultTheme: object
+  changeTheme: (theme: ThemeData) => void
+  constructor(theme: ThemeData, styleSheetId: string)
+}

package/_dist/theme-tool.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import definedComponents from './theme.config'
+
+/**
+ *  TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
+ *  使用示例：new TinyThemeTool(theme,'styleSheetId')
+ *  @param {Object} theme 主题配置数据，结构如下：
+ *  {
+ *    id: 'tiny-infinity-theme',
+ *    name: 'Infinity',
+ *    cnName: '无限',
+ *    data: {'ti-base-color': 'white'}
+ *  }
+ *  @param {String} styleSheetId style标签的id
+ */
+
+export default class TinyThemeTool {
+  constructor(theme, styleSheetId = 'tinyThemeVariables') {
+    // 当前主题
+    this.currentTheme = null
+
+    // 当前style标签元素
+    this.contentElement = null
+
+    // 当前style标签的id
+    this.styleSheetId = null
+
+    // 默认主题
+    this.defaultTheme = {
+      id: 'tiny-default-theme',
+      name: 'Default',
+      cnName: '默认',
+      data: {}
+    }
+
+    let currentTheme = theme
+    if (!theme) {
+      currentTheme = this.defaultTheme
+    }
+    this.styleSheetId = styleSheetId
+    this.changeTheme(currentTheme)
+  }
+
+  changeTheme(theme) {
+    let currentTheme = theme
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      throw new TypeError('当前主题工具只支持浏览器环境')
+    }
+    if (!theme) {
+      currentTheme = this.defaultTheme
+    }
+    this.currentTheme = currentTheme
+    if (!this.contentElement) {
+      const styleElement = document.getElementById(this.styleSheetId)
+      if (styleElement) {
+        this.contentElement = styleElement
+      } else {
+        this.contentElement = document.createElement('style')
+        this.contentElement.id = this.styleSheetId
+        document.head.appendChild(this.contentElement)
+      }
+    }
+    this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
+    this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
+  }
+
+  /**
+   * 获取需要设置主题变量的选择器，支持多个选择器（在 theme.config.js 中配置，多个选择器之间通过逗号分隔）
+   * @param {theme.config 配置文件中的 key} key
+   * @returns 需要设置主题变量的选择器
+   * @example
+   * 示例1：输入：checkbox-button，输出：.tiny-checkbox-button[class*=tiny]
+   * 示例2：输入：month-table，输出：.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
+   */
+  getSelectorByKey(key) {
+    if (!definedComponents[key]) return
+
+    let selector = ''
+    const keyItems = definedComponents[key].split(',')
+    keyItems.forEach((componentName, index) => {
+      // 加上 [class*=tiny] 是为了提高权重，促使主题变换成功
+      selector += '.tiny-' + componentName + '[class*=tiny]' + (index < keyItems.length - 1 ? ',' : '')
+    })
+    return selector
+  }
+
+  // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
+  findClassName(name) {
+    const compNameList = name.split('-')
+    if (compNameList.length < 2) {
+      return false
+    }
+    const threeKey = `${compNameList[1]}-${compNameList[2]}-${compNameList[3]}`
+    const twoKey = `${compNameList[1]}-${compNameList[2]}`
+
+    // 优先三段式命名的组件名，优先级从高到低为三段-二段-一段
+    return (
+      this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || '.tiny-' + compNameList[1] + '[class*=tiny]'
+    )
+  }
+
+  formatCSSVariables(themeData) {
+    const componentsMap = {}
+    let rootCssVar = 'html:root {'
+    let componentsCssVar = ''
+
+    Object.keys(themeData).forEach((item) => {
+      const isBaseCssVar = item.startsWith('ti-base') || item.startsWith('ti-common')
+      if (isBaseCssVar) {
+        rootCssVar += `--${item}:${themeData[item]};`
+      } else {
+        const classkey = this.findClassName(item)
+        if (classkey) {
+          if (componentsMap[classkey]) {
+            componentsMap[classkey].push(`--${item}:${themeData[item]};`)
+          } else {
+            componentsMap[classkey] = [`--${item}:${themeData[item]};`]
+          }
+        }
+      }
+    })
+
+    Object.keys(componentsMap).forEach((item) => {
+      componentsCssVar += `${item}{${componentsMap[item].join('')}}`
+    })
+
+    return `${rootCssVar}}${componentsCssVar}`
+  }
+}