@opentiny/vue-theme 3.6.7 → 3.8.2

package/theme/index.js

@@ -10,10 +10,13 @@
 *
 */
 
+import { flattenObject } from './utils'
 import { impressionTheme } from './impression-theme'
 import { infinityTheme } from './infinity-theme'
 import { deepTheme } from './deep-theme'
 import { galaxyTheme } from './galaxy-theme'
+import * as auroraTheme from './aurora-theme'
+import * as smbTheme from './smb-theme'
 
 export const tinyImpressionTheme = {
   id: 'tiny-impression-theme',
@@ -42,3 +45,17 @@ export const tinyGalaxyTheme = {
   cnName: '追光',
   data: galaxyTheme
 }
+
+export const tinyAuroraTheme = {
+  id: 'tiny-aurora-theme',
+  name: 'Aurora',
+  cnName: 'Aurora',
+  data: flattenObject(auroraTheme)
+}
+
+export const tinySmbTheme = {
+  id: 'tiny-smb-theme',
+  name: 'SMB',
+  cnName: 'SMB',
+  data: flattenObject(smbTheme)
+}

package/theme/infinity-theme/index.js

@@ -29,7 +29,7 @@ export const infinityTheme = {
   'ti-common-color-border': '#d7d8da',
   'ti-base-color-brand-5': '#526ecc',
   'ti-common-size-height-normal': '32px',
-  'ti-common-box-shadow': '0 4px 8px 0 rgba(37,43,58,.2)',
+  'ti-common-shadow-2-down': '0 4px 8px 0 rgba(37,43,58,.2)',
   'ti-common-color-hover-background': '#f2f2f3',
   'ti-common-color-selected-background': '#f2f5fc',
   'ti-common-dropdown-gap': '8px',
@@ -55,7 +55,7 @@ export const infinityTheme = {
   'ti-checkbox-border-color-hover': '#252b3a',
   'ti-checkbox-icon-height': '6px',
   'ti-checkbox-icon-width': '3px',
-  'ti-checkbox-icon-top': '2px',
+  'ti-checkbox-icon-margin-top': '2px',
   'ti-picker-panel-border-color': '#fff',
   'ti-radio-inner-size': '10px',
   'ti-radio-bordered-checked-hover-border-color': 'var(--ti-base-color-brand-8)',
@@ -88,7 +88,7 @@ export const infinityTheme = {
   'ti-slider-margin-right': '0',
   'ti-slider-margin-left': '-4px',
   'ti-time-panel-border-color': 'transparent',
-  'ti-time-panel-box-shadow': 'var(--ti-common-box-shadow)',
+  'ti-time-panel-box-shadow': 'var(--ti-common-shadow-2-down)',
   'ti-time-spinner-item-font-weight': 'normal',
   'ti-time-panel-content-split-line-display': 'none',
   'ti-time-spinner-item-bg-color': '#f2f5fc',
@@ -150,19 +150,19 @@ export const infinityTheme = {
 
   'ti-dropdown-menu-padding-vertical': '12px',
   'ti-dropdown-menu-padding-horizontal': '12px',
-  'ti-dropdown-menu-box-shadow': 'var(--ti-common-box-shadow)',
+  'ti-dropdown-menu-box-shadow': 'var(--ti-common-shadow-2-down)',
   'ti-dropdown-menu-margin-vertical': '8px',
-  'ti-dropdown-menu-item-height': '36px',
-  'ti-dropdown-menu-item-padding-vertical': '0',
-  'ti-dropdown-menu-item-padding-horizontal': '12px',
-  'ti-dropdown-menu-item-hover-bg-color': '#f2f2f3',
-  'ti-dropdown-menu-item-active-bg-color': 'var(--ti-dropdown-menu-item-hover-bg-color)',
-  'ti-dropdown-menu-item-text-color': '#252b3a',
-  'ti-dropdown-menu-item-hover-text-color': 'var(--ti-dropdown-menu-item-text-color)',
-  'ti-dropdown-menu-item-active-text-color': 'var(--ti-dropdown-menu-item-text-color)',
-  'ti-dropdown-menu-item-border-radius': 'var(--ti-common-border-radius-normal)',
-  'ti-dropdown-menu-item-disabled-text-color': '#cfd0d3',
-  'ti-dropdown-menu-item-max-width': '100%',
+  'ti-dropdown-item-height': '36px',
+  'ti-dropdown-item-padding-vertical': '0',
+  'ti-dropdown-item-padding-horizontal': '12px',
+  'ti-dropdown-item-hover-bg-color': '#f2f2f3',
+  'ti-dropdown-item-active-bg-color': 'var(--ti-dropdown-item-hover-bg-color)',
+  'ti-dropdown-item-text-color': '#252b3a',
+  'ti-dropdown-item-hover-text-color': 'var(--ti-dropdown-item-text-color)',
+  'ti-dropdown-item-active-text-color': 'var(--ti-dropdown-item-text-color)',
+  'ti-dropdown-item-border-radius': 'var(--ti-common-border-radius-normal)',
+  'ti-dropdown-item-disabled-text-color': '#cfd0d3',
+  'ti-dropdown-item-max-width': '100%',
   'ti-split-trigger-bg-color': '#f2f2f3',
   'ti-split-trigger-bar-bg-color': 'var(--ti-split-trigger-bg-color)',
   'ti-split-trigger-hover-bg-color': '#7693f5',
@@ -172,7 +172,7 @@ export const infinityTheme = {
   'ti-split-trigger-bar-margin-top': '2px',
   'ti-split-trigger-con-col-cursor': 'col-resize',
   'ti-split-trigger-con-row-cursor': 'row-resize',
-  'ti-picker-panel-box-shadow': 'var(--ti-common-box-shadow)',
+  'ti-picker-panel-box-shadow': 'var(--ti-common-shadow-2-down)',
   'ti-date-picker-width': '249px',
   'ti-date-picker-font-size': '12px',
   'ti-date-table-td-today-border-color': 'transparent',
@@ -380,19 +380,19 @@ export const infinityTheme = {
   'ti-cascader-node-selectable-text-color': 'var(--ti-base-color-brand-7)',
   'ti-cascader-node-hover-text-color': 'var(--ti-base-color-brand-7)',
   // select
-  'ti-select-input-caret-text-color': 'var(--ti-base-color-common-5)',
-  'ti-select-input-caret-hover-text-color': 'var(--ti-base-color-common-7)',
+  'ti-select-input-caret-icon-color': 'var(--ti-base-color-common-5)',
+  'ti-select-input-caret-hover-icon-color': 'var(--ti-base-color-common-7)',
   // option
   'ti-select-dropdown-list-padding-top': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-list-padding-horizontal': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-list-padding-bottom': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-border-color': 'var(--ti-base-color-white)',
-  'ti-select-dropdown-item-padding-vertical': '0',
-  'ti-select-dropdown-item-padding-horizontal': 'var(--ti-common-space-3x)',
-  'ti-select-dropdown-item-margin-top': 'var(--ti-common-space-base)',
-  'ti-select-dropdown-item-height': '36px',
-  'ti-select-dropdown-item-selected-text-color': 'var(--ti-common-color-info-normal)',
-  'ti-select-dropdown-item-selected-bg-color': 'var(--ti-base-color-brand-1)',
+  'ti-option-padding-vertical': '0',
+  'ti-option-padding-horizontal': 'var(--ti-common-space-3x)',
+  'ti-option-margin-top': 'var(--ti-common-space-base)',
+  'ti-option-height': '36px',
+  'ti-option-selected-text-color': 'var(--ti-common-color-info-normal)',
+  'ti-option-selected-bg-color': 'var(--ti-base-color-brand-1)',
   // form-item
   'ti-form-item-error-text-color': 'var(--ti-base-color-error-3)',
   'ti-form-item-error-bg-color': '#ffd5d4',

package/theme/smb-theme/component.js

@@ -0,0 +1,43 @@
+export * from '../../alert/smb-theme'
+export * from '../../badge/smb-theme'
+export * from '../../breadcrumb/smb-theme'
+export * from '../../button/smb-theme'
+export * from '../../button-group/smb-theme'
+export * from '../../checkbox/smb-theme'
+export * from '../../checkbox-button/smb-theme'
+export * from '../../checkbox-group/smb-theme'
+export * from '../../collapse-item/smb-theme'
+export * from '../../date-table/smb-theme'
+export * from '../../dialog-box/smb-theme'
+export * from '../../dropdown/smb-theme'
+export * from '../../dropdown-item/smb-theme'
+export * from '../../dropdown-menu/smb-theme'
+export * from '../../form-item/smb-theme'
+export * from '../../form/smb-theme'
+export * from '../../grid/smb-theme'
+export * from '../../input/smb-theme'
+export * from '../../ip-address/smb-theme'
+export * from '../../link/smb-theme'
+export * from '../../loading/smb-theme'
+export * from '../../modal/smb-theme'
+export * from '../../nav-menu/smb-theme'
+export * from '../../notify/smb-theme'
+export * from '../../numeric/smb-theme'
+export * from '../../option/smb-theme'
+export * from '../../option-group/smb-theme'
+export * from '../../pager/smb-theme'
+export * from '../../popover/smb-theme'
+export * from '../../progress/smb-theme'
+export * from '../../radio/smb-theme'
+export * from '../../scrollbar/smb-theme'
+export * from '../../search/smb-theme'
+export * from '../../select/smb-theme'
+export * from '../../select-dropdown/smb-theme'
+export * from '../../slider/smb-theme'
+export * from '../../steps/smb-theme'
+export * from '../../switch/smb-theme'
+export * from '../../tabs/smb-theme'
+export * from '../../tag/smb-theme'
+export * from '../../text-popup/smb-theme'
+export * from '../../textarea/smb-theme'
+export * from '../../tooltip/smb-theme'

package/theme/smb-theme/index.js

@@ -0,0 +1,342 @@
+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-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-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-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-icon-info': '#1476FF',
+  'ti-base-color-data-3': '#6E51E0',
+  'ti-base-color-data-4': '#5CB300',
+  'ti-base-color-data-5': '#FCBE1E',
+  'ti-base-color-data-2': '#0BB8B2', // 新风格专用
+  'ti-base-color-data-6': '#33BCF2', // 新风格专用
+  'ti-base-color-data-7': '#BA53E6', // 新风格专用
+  'ti-base-color-data-8': '#EB4696', // 新风格专用
+
+  /* 场景色 */
+
+  // 功能色
+  'ti-common-color-success-bg': 'var(--ti-base-color-success-bg)',
+  'ti-common-color-success-border': 'var(--ti-base-color-success-border)',
+  'ti-common-color-success': 'var(--ti-base-color-success)',
+  'ti-common-color-text-success': 'var(--ti-base-color-success-text)',
+  'ti-common-color-error-bg': 'var(--ti-base-color-error-bg)',
+  'ti-common-color-error-border': 'var(--ti-base-color-error)',
+  'ti-common-color-error-border-secondary': 'var(--ti-base-color-error-border)',
+  'ti-common-color-error': 'var(--ti-base-color-error)',
+  'ti-common-color-error-text': 'var(--ti-base-color-error-text)',
+  'ti-common-color-warn-bg': 'var(--ti-base-color-warn-bg)',
+  'ti-common-color-warn-border': 'var(--ti-base-color-warn-border)',
+  'ti-common-color-warn': 'var(--ti-base-color-warn)',
+  'ti-common-color-warn-text': 'var(--ti-base-color-warn-text)',
+  'ti-common-color-prompt-bg': 'var(--ti-base-color-prompt-bg)',
+  'ti-common-color-prompt-border': 'var(--ti-base-color-prompt-border)',
+  'ti-common-color-prompt': 'var(--ti-base-color-prompt)',
+  'ti-common-color-prompt-text': 'var(--ti-base-color-prompt-text)',
+  'ti-common-color-warn-secondary': 'var(--ti-base-color-warn-1)',
+
+  // 文本色
+  'ti-common-color-error-icon-from': 'var(--ti-base-color-error-icon-from)',
+  'ti-common-color-error-icon-to': 'var(--ti-base-color-error-icon-to)',
+  'ti-common-color-warn-icon-from': 'var(--ti-base-color-warn-icon-from)',
+  'ti-common-color-warn-icon-to': 'var(--ti-base-color-warn-icon-to)',
+  'ti-common-color-prompt-icon-from': 'var(--ti-base-color-prompt-icon-from)',
+  'ti-common-color-prompt-icon-to': 'var(--ti-base-color-prompt-icon-to)',
+  'ti-common-color-text-primary': 'var(--ti-base-color-common)',
+  'ti-common-color-text-secondary': 'var(--ti-base-color-common-1)',
+  '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-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-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)',
+
+  // 图标色
+  'ti-common-color-icon': 'var(--ti-base-color-common)', // 5.12新增
+  'ti-common-color-icon-normal': 'var(--ti-base-color-common-2)', // 5.12修改
+  'ti-common-color-icon-hover': 'var(--ti-base-color-common)', // 5.12修改
+  '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-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)',
+  'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-1)',
+  'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)',
+
+  // 线条色
+  'ti-common-color-line-normal': 'var(--ti-base-color-common-3)',
+  'ti-common-color-line-hover': 'var(--ti-base-color-common)',
+  '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-bg-normal': 'var(--ti-base-color-bg)',
+  'ti-common-color-bg-disabled': 'var(--ti-base-color-bg-1)',
+  '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-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)',
+  'ti-common-color-bg-minor': 'var(--ti-base-color-bg-7)',
+  '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-emphasize': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-6)',
+  '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-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)',
+
+  // 图表色
+  'ti-common-color-data-1': 'var(--ti-base-color-icon-info)',
+  'ti-common-color-data-2': 'var(--ti-base-color-data-2)',
+  'ti-common-color-data-3': 'var(--ti-base-color-data-3)',
+  'ti-common-color-data-4': 'var(--ti-base-color-data-4)',
+  'ti-common-color-data-5': 'var(--ti-base-color-data-5)',
+  'ti-common-color-data-6': 'var(--ti-base-color-data-6)',
+  'ti-common-color-data-7': 'var(--ti-base-color-data-7)',
+  'ti-common-color-data-8': 'var(--ti-base-color-data-8)',
+
+  /* 字号 */
+  'ti-common-font-size-base': '14px', // 正文
+  'ti-common-font-size-0': '12px', // 辅助文本
+  'ti-common-font-size-1': '14px',
+  'ti-common-font-size-2': '16px',
+  'ti-common-font-size-3': '18px',
+  'ti-common-font-size-4': '20px',
+  'ti-common-font-size-5': '24px',
+  'ti-common-font-size-6': '32px',
+  'ti-common-font-size-7': '36px',
+  'ti-common-font-size-8': '40px',
+  'ti-common-font-size-9': '48px',
+  'ti-common-font-size-10': '56px',
+  'ti-common-line-number': '1.5',
+
+  /* 字体 */
+  'ti-common-font-family':
+    '"Helvetica", "Arial", "PingFangSC-Regular", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei"',
+
+  /* 间距 */
+  'ti-common-space-base': '4px',
+  'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)',
+  'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)',
+  'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)',
+  'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)',
+  'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)',
+  'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)',
+  'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)',
+  'ti-common-space-6': '6px',
+  'ti-common-space-10': '10px',
+  'ti-common-space-0': '0px',
+  'ti-common-space-2': '2px',
+
+  /* 阴影 */
+  'ti-common-shadow-1-up': '0 -1px 3px 0 rgba(0,0,0,0.08)',
+  '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-border-radius-normal': 'var(--ti-common-border-radius-3)',
+  'ti-common-border-radius-1': '2px',
+  'ti-common-border-radius-2': '4px',
+  'ti-common-border-radius-3': '6px',
+  'ti-common-border-radius-4': '8px',
+  'ti-common-border-radius-5': '12px',
+  'ti-common-border-radius-6': '16px',
+  'ti-common-border-radius-7': '24px',
+  'ti-common-border-radius-8': '32px',
+  'ti-common-border-radius-9': '48px',
+  'ti-common-border-radius-10': '100px',
+
+  /* 2023.4.17 新增 */
+
+  /* 主要 */
+  'ti-common-color-primary-normal': 'var(--ti-base-color-brand)',
+  'ti-common-color-primary-hover': 'var(--ti-base-color-brand-1)',
+  'ti-common-color-primary-active': 'var(--ti-base-color-brand-1)',
+  'ti-common-color-primary-disabled': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-primary-disabled-border': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-primary-disabled-text': 'var(--ti-base-color-common-3)',
+
+  /* 成功 */
+  'ti-common-color-success-normal': 'var(--ti-base-color-success)',
+  'ti-common-color-success-hover': '#b9e683',
+  'ti-common-color-success-active': '#b9e683',
+  'ti-common-color-success-disabled': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-success-disabled-border': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-success-disabled-text': 'var(--ti-base-color-common-3)',
+
+  /* 警告 */
+  'ti-common-color-warning-normal': 'var(--ti-base-color-warn)',
+  'ti-common-color-warning-hover': '#fcc98b',
+  'ti-common-color-warning-active': '#fcc98b',
+  'ti-common-color-warning-disabled': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-warning-disabled-border': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-warning-disabled-text': 'var(--ti-base-color-common-3)',
+
+  /*  失败 */
+  'ti-common-color-danger-normal': 'var(--ti-base-color-error)',
+  'ti-common-color-danger-hover': '#faa9a5',
+  'ti-common-color-danger-active': '#faa9a5',
+  'ti-common-color-danger-disabled': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-danger-disabled-border': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-danger-disabled-text': 'var(--ti-base-color-common-3)',
+
+  /* 信息 */
+  'ti-common-color-info-normal': 'var(--ti-base-color-common)',
+  'ti-common-color-info-hover': 'var(--ti-base-color-common-1)',
+  'ti-common-color-info-active': 'var(--ti-base-color-common-1)',
+  'ti-common-color-info-disabled': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-info-disabled-border': 'var(--ti-base-color-bg-1)',
+  'ti-common-color-info-disabled-text': 'var(--ti-base-color-common-3)',
+
+  'ti-common-color-light': 'var(--ti-base-color-bg-5)',
+  'ti-common-color-dark': '#000',
+
+  /* 边框/分割线颜色 */
+  'ti-common-color-border': '#999999',
+  'ti-common-color-border-hover': 'var(--ti-base-color-brand)',
+
+  /* 背景色 */
+  'ti-common-color-hover-background': 'var(--ti-base-color-bg);',
+  'ti-common-color-selected-background': 'var(--ti-base-color-bg)',
+
+  /* 文本色 */
+  'ti-common-color-selected-text-color': 'var(--ti-base-color-brand)',
+  'ti-common-color-placeholder': 'var(--ti-base-color-common-2)',
+
+  /* 间距 */
+  'ti-common-dropdown-gap': '4px',
+
+  /* 字重 */
+  'ti-common-font-weight-light': '100',
+  'ti-common-font-weight-normal': '400',
+  'ti-common-font-weight-bold': '600',
+
+  /* 字体 */
+  'ti-common-font-family-normal': 'var(--ti-common-font-family)',
+
+  /* 宽 */
+  'ti-common-size-width-large': '152px',
+  'ti-common-size-width-medium': '120px',
+  'ti-common-size-width-normal': '104px', // Default
+  'ti-common-size-width-small': '80px',
+  'ti-common-size-width-minor': '30px',
+  'ti-common-size-width-mini': '24px',
+
+  /* 高 */
+  'ti-common-size-height-large': '48px',
+  'ti-common-size-height-medium': '40px',
+  'ti-common-size-height-normal': '32px', // Default
+  'ti-common-size-height-small': '24px',
+  'ti-common-size-height-minor': '30px',
+  'ti-common-size-height-mini': '24px',
+
+  /* 行高 */
+  'ti-common-line-height-base': '18px', // 跟字号对应
+  'ti-common-line-height-1': '22px',
+  'ti-common-line-height-2': '24px',
+  'ti-common-line-height-3': '28px',
+  'ti-common-line-height-4': '30px',
+  'ti-common-line-height-5': '36px',
+  'ti-common-line-height-6': '48px',
+  'ti-common-line-height-7': '54px',
+  'ti-common-line-height-8': '60px',
+  'ti-common-line-height-9': '72px',
+  'ti-common-line-height-10': '84px',
+
+  /*  滚动条 */
+  'ti-common-scrollbar-width': '8px',
+  'ti-common-scrollbar-track-piece-bg-color': 'var(--ti-base-color-bg-5)',
+  'ti-common-scrollbar-thumb-bg-color': 'var(--ti-base-color-common-4)',
+  'ti-common-scrollbar-thumb-border-radius': '4px',
+  'ti-common-scrollbar-thumb-hover-bg-color': 'var(--ti-base-color-common-4)',
+  'ti-common-scrollbar-thumb-active-bg-color': 'var(--ti-base-color-common-4)'
+}
+
+export * from './component'

package/theme/utils.js

@@ -0,0 +1,12 @@
+export function flattenObject(obj) {
+  const result = {}
+
+  Object.entries(obj).forEach(([key, val]) => {
+    if (val && typeof val === 'object')
+      Object.assign(result, val)
+    else
+      result[key] = val
+  })
+
+  return result
+}

package/theme-tool.js

@@ -1,16 +1,16 @@
 /**
-* 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 components from './theme.config'
+ * 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变量主题的装卸，主题元数据转换成主题数据
@@ -73,31 +73,38 @@ export default class TinyThemeTool {
       }
     }
     this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
+
     this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
   }
 
+  // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
   findClassName(name) {
     const compNameList = name.split('-')
     if (compNameList.length < 2) {
       return false
     }
-    const compLength = components.length
+    const compLength = definedComponents.length
     let compName = ''
     for (let i = 0; i < compLength; i++) {
-      if (components[i] === `${compNameList[1]}-${compNameList[2]}`) {
-        compName = `tiny-${components[i]}`
+      // 先试试是不是双段式的组件名： 比如dialog-box 这种
+      if (definedComponents[i] === `${compNameList[1]}-${compNameList[2]}`) {
+        compName = `tiny-${definedComponents[i]}`
         break
       }
     }
+    // 不是双段的组件，则取第一位为组件名
     if (!compName) {
       compName = `tiny-${compNameList[1]}`
     }
+
+    // 提高权重，促使主题变换成功
+    compName = `${compName}[class*=tiny]`
     return compName
   }
 
   formatCSSVariables(themeData) {
     const componentsMap = {}
-    let rootCssVar = ':root {'
+    let rootCssVar = 'html:root {'
     let componentsCssVar = ''
 
     Object.keys(themeData).forEach((item) => {