From 68f6fd516b277a64339ad9c2994a41ffb095db18 Mon Sep 17 00:00:00 2001
From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Date: Fri, 29 Dec 2023 10:08:03 +0800
Subject: [PATCH] feat(alert): Add unlimited theme switching function to adapt
 to alert unlimited themes (#1229)

---
 examples/docs/newsrc/pc.vue                   |   7 +
 examples/docs/newsrc/uses/useTheme.js         |   5 +-
 .../app/alert/basic-usage-composition-api.vue |   1 +
 .../sites/demos/pc/app/alert/basic-usage.vue  |   1 +
 .../pc/app/alert/icon-composition-api.vue     |   5 +-
 examples/sites/demos/pc/app/alert/icon.vue    |   7 +-
 .../sites/demos/pc/app/alert/webdoc/alert.js  |  12 +-
 packages/theme/src/alert/index.less           |  13 +
 packages/theme/src/alert/vars.less            |  13 +
 packages/theme/src/theme/index.js             |   4 +-
 .../theme/infinity-theme/component-vars.js    | 382 ++++++++++++++
 .../theme/src/theme/infinity-theme/index.js   | 481 +++++-------------
 12 files changed, 559 insertions(+), 372 deletions(-)
 create mode 100644 packages/theme/src/theme/infinity-theme/component-vars.js

diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue
index 649b6f400..8aa93a6d8 100644
--- a/examples/docs/newsrc/pc.vue
+++ b/examples/docs/newsrc/pc.vue
@@ -110,6 +110,13 @@
           >
             Default Theme
           </tiny-dropdown-item>
+          <tiny-dropdown-item
+            label="tiny-infinity-theme"
+            class="minw160"
+            :class="{ '!c-primary': currThemeLabel === 'tiny-infinity-theme' }"
+          >
+            Infinity Theme
+          </tiny-dropdown-item>
           <tiny-dropdown-item
             label="tiny-aurora-theme"
             class="minw160"
diff --git a/examples/docs/newsrc/uses/useTheme.js b/examples/docs/newsrc/uses/useTheme.js
index f9d65ed22..ffd8bbe6e 100644
--- a/examples/docs/newsrc/uses/useTheme.js
+++ b/examples/docs/newsrc/uses/useTheme.js
@@ -1,5 +1,5 @@
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinyAuroraTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
+import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
 import { Notify } from '@opentiny/vue'
 
@@ -22,7 +22,8 @@ export function useTheme() {
 
   const THEME_MAP = {
     'tiny-aurora-theme': tinyAuroraTheme,
-    'tiny-smb-theme': tinySmbTheme
+    'tiny-smb-theme': tinySmbTheme,
+    'tiny-infinity-theme': tinyInfinityTheme
   }
 
   const changeTheme = ({ vm }) => {
diff --git a/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
index 4c413f739..035a9f569 100644
--- a/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
@@ -6,6 +6,7 @@
     <tiny-alert type="warning">
       <template #description> type 为 warning </template>
     </tiny-alert>
+    <tiny-alert type="simple" description="type 为 simple"></tiny-alert>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/alert/basic-usage.vue b/examples/sites/demos/pc/app/alert/basic-usage.vue
index 500fb2179..4f553868a 100644
--- a/examples/sites/demos/pc/app/alert/basic-usage.vue
+++ b/examples/sites/demos/pc/app/alert/basic-usage.vue
@@ -6,6 +6,7 @@
     <tiny-alert type="warning">
       <template #description> type 为 warning </template>
     </tiny-alert>
+    <tiny-alert type="simple" description="type 为 simple"></tiny-alert>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/alert/icon-composition-api.vue b/examples/sites/demos/pc/app/alert/icon-composition-api.vue
index 7b2102eba..e472bbaaf 100644
--- a/examples/sites/demos/pc/app/alert/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/icon-composition-api.vue
@@ -3,14 +3,15 @@
     <tiny-alert :icon="TinyIconBoat" description="自定义图标"></tiny-alert>
     <tiny-alert description="默认图标"></tiny-alert>
     <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert :icon="TinyIconWarningTriangle" type="warning" description="type 为 warning 的默认图标"></tiny-alert>
     <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
   </div>
 </template>
 
 <script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
-import { iconBoat } from '@opentiny/vue-icon'
+import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 const TinyIconBoat = iconBoat()
+const TinyIconWarningTriangle = iconWarningTriangle()
 </script>
diff --git a/examples/sites/demos/pc/app/alert/icon.vue b/examples/sites/demos/pc/app/alert/icon.vue
index 6ad5c678b..39143937a 100644
--- a/examples/sites/demos/pc/app/alert/icon.vue
+++ b/examples/sites/demos/pc/app/alert/icon.vue
@@ -3,14 +3,14 @@
     <tiny-alert :icon="TinyIconBoat" description="自定义图标"></tiny-alert>
     <tiny-alert description="默认图标"></tiny-alert>
     <tiny-alert type="success" description="type 为 success 的默认图标"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning 的默认图标"></tiny-alert>
+    <tiny-alert :icon="TinyIconWarningTriangle" type="warning" description="type 为 warning 的默认图标"></tiny-alert>
     <tiny-alert type="error" description="type 为 error 的默认图标"></tiny-alert>
   </div>
 </template>
 
 <script>
 import { Alert } from '@opentiny/vue'
-import { iconBoat } from '@opentiny/vue-icon'
+import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -18,7 +18,8 @@ export default {
   },
   data() {
     return {
-      TinyIconBoat: iconBoat()
+      TinyIconBoat: iconBoat(),
+      TinyIconWarningTriangle: iconWarningTriangle()
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/alert/webdoc/alert.js b/examples/sites/demos/pc/app/alert/webdoc/alert.js
index 3c32be230..a88eadeca 100644
--- a/examples/sites/demos/pc/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/pc/app/alert/webdoc/alert.js
@@ -174,7 +174,8 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'success' | 'warning' | 'info' | 'error'",
+          'type': 'IType',
+          'typeAnchorName': 'IType',
           'defaultValue': "'info'",
           'desc': {
             'zh-CN': '警告的类型',
@@ -238,5 +239,14 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'success' | 'warning' | 'info' | 'error' | 'simple'
+`
+    }
   ]
 }
diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less
index efb2b8e95..aa63de300 100644
--- a/packages/theme/src/alert/index.less
+++ b/packages/theme/src/alert/index.less
@@ -130,6 +130,19 @@
     }
   }
 
+  &&--simple {
+    .alert-variant(var(--ti-alert-title-text-color);
+      var(--ti-alert-simple-border-color);
+      var(--ti-alert-simple-icon-color);
+      var(--ti-alert-simple-link-text-color);
+      var(--ti-alert-simple-bg-color);
+      var(--ti-alert-simple-close-icon-color));
+
+    .@{alert-prefix-cls}__close:hover {
+      fill: var(--ti-alert-simple-close-hover-icon-color);
+    }
+  }
+
   &__icon {
     font-size: var(--ti-alert-icon-font-size);
   }
diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less
index 43754232a..b02e3085b 100644
--- a/packages/theme/src/alert/vars.less
+++ b/packages/theme/src/alert/vars.less
@@ -125,4 +125,17 @@
   --ti-alert-info-close-icon-color: var(--ti-alert-info-icon-color);
   // info类型悬浮关闭图标色
   --ti-alert-info-close-hover-icon-color: var(--ti-alert-info-icon-color);
+  
+  // simple类型边框色
+  --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
+  // simple类型图标色
+  --ti-alert-simple-icon-color: var(--ti-common-color-text-secondary, #575d6c);
+  // simple类型链接色(hide)
+  --ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #7693f5);
+  // simple类型背景色
+  --ti-alert-simple-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
+  // simple类型关闭图标色
+  --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color);
+  // simple类型悬浮关闭图标色
+  --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
 }
diff --git a/packages/theme/src/theme/index.js b/packages/theme/src/theme/index.js
index 06b1a1e54..eb5ee7212 100644
--- a/packages/theme/src/theme/index.js
+++ b/packages/theme/src/theme/index.js
@@ -11,7 +11,7 @@
  */
 
 import { impressionTheme } from './impression-theme'
-import { infinityTheme } from './infinity-theme'
+import { tinyBaseInfinityTheme, infinityConcat } from './infinity-theme'
 import { deepTheme } from './deep-theme'
 import { galaxyTheme } from './galaxy-theme'
 import { tinyBaseAuroraTheme, concatTheme as auroraConcat } from './aurora-theme'
@@ -28,7 +28,7 @@ export const tinyInfinityTheme = {
   id: 'tiny-infinity-theme',
   name: 'Infinity',
   cnName: '无限',
-  data: infinityTheme
+  data: { ...tinyBaseInfinityTheme, ...infinityConcat }
 }
 
 export const tinyDeepTheme = {
diff --git a/packages/theme/src/theme/infinity-theme/component-vars.js b/packages/theme/src/theme/infinity-theme/component-vars.js
new file mode 100644
index 000000000..013f595c0
--- /dev/null
+++ b/packages/theme/src/theme/infinity-theme/component-vars.js
@@ -0,0 +1,382 @@
+/**
+ * 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.
+ *
+ */
+
+export const infinityConcat = {
+  'ti-button-size-normal-height': 'var(--ti-common-space-8x)',
+  'ti-button-normal-background-color': '#ebebeb',
+  'ti-button-normal-border-color': 'var(--ti-base-color-transparent)',
+  'ti-button-normal-text-color': 'var(--ti-base-color-common-7)',
+  'ti-button-padding-vertical': '0',
+  'ti-button-normal-hover-bg-color': '#d1d1d1',
+  'ti-button-normal-hover-border-color': 'var(--ti-base-color-transparent)',
+  'ti-button-normal-hover-text-color': 'var(--ti-base-color-common-7)',
+  'ti-button-text-color': '#526ecc',
+  'ti-button-text-color-hover': 'var(--ti-base-color-brand-8)',
+  'ti-autocomplete-suggestion-border-color': '#fff',
+  'ti-autocomplete-suggestion-bg-color': '#fff',
+  'ti-autocomplete-li-hover-bg-color': 'var(--ti-common-color-hover-background)',
+  'ti-autocomplete-li-select-bg-color': '#f2f5fc',
+  'ti-autocomplete-li-height': '36px',
+  'ti-checkbox-border-color': '#d7d8da',
+  'ti-checkbox-border-color-hover': '#252b3a',
+  'ti-checkbox-icon-height': '6px',
+  'ti-checkbox-icon-width': 'var(--ti-common-size-3)',
+  '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)',
+  'ti-radio-bordered-border-color': '#d7d8da',
+  'ti-radio-input-disabled-bg-color': '#f5f5f5',
+  'ti-switch-off-bg-color': '#d7d8da',
+  'ti-link-default-text-color': 'var(--ti-base-color-brand-7)',
+  'ti-link-default-hover-text-color': 'var(--ti-base-color-brand-8)',
+  'ti-numeric-input-normal-height': 'var(--ti-common-size-height-normal)',
+  'ti-numeric-input-width': '140px',
+  'ti-slider-height': '5px',
+  'ti-slider-range-height': '5px',
+  'ti-slider-handle-border-radius': '50%',
+  'ti-slider-handle-width': '14px',
+  'ti-slider-handle-height': '14px',
+  'ti-slider-range-top': '0',
+  'ti-slider-handle-top': '0',
+  'ti-slider-border-radius': '100px',
+  'ti-slider-range-border-radius': '100px',
+  'ti-slider-handle-border-weight': '2px',
+  'ti-slider-range-hover-bg-color': '#7693f5',
+  'ti-slider-handle-icon-display': 'none',
+  'ti-slider-tips-margin-left': '0',
+  'ti-slider-handle-transform': 'scale(1.3)',
+  'ti-slider-range-margin-top': '0',
+  'ti-slider-handle-margin-top': '-5px',
+  'ti-slider-handle-margin-horizontal': '-8px',
+  'ti-slider-handle-margin-bottom': '0',
+  'ti-slider-margin-vertical': '-8px',
+  'ti-slider-margin-right': '0',
+  'ti-slider-margin-left': '-4px',
+  'ti-time-panel-border-color': 'var(--ti-common-color-transparent)',
+  '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',
+  'ti-time-spinner-list-border-color': 'var(--ti-common-color-line-dividing)',
+  'ti-time-panel-btn-cancel-display': 'none',
+  'ti-time-panel-btn-confirm-text-color': 'var(--ti-common-color-info-normal)',
+  'ti-time-panel-btn-bg-color': '#EBEBEB',
+  'ti-time-panel-btn-padding-vertical': '0',
+  'ti-time-panel-btn-padding-horizontal': '12px',
+  'ti-time-panel-btn-height': '24px',
+  'ti-time-panel-btn-min-width': '56px',
+  'ti-time-panel-btn-font-weight': 'normal',
+  'ti-time-panel-btn-confirm-hover-bg-color': 'var(--ti-button-normal-hover-bg-color)',
+  'ti-tree-node-content-current-bg-color': 'var(--ti-common-color-selected-background)',
+  'ti-tree-node-content-hover-bg-color': 'var(--ti-common-color-hover-background)',
+  // tabs
+  'ti-tabs-header-font-active-border-color': 'var(--ti-base-color-common-7)',
+  'ti-tabs-header-text-color': 'var(--ti-base-color-common-7)',
+  'ti-tabs-header-font-normal-text-color': '#71757f',
+  'ti-tabs-item-margin-right': 'var(--ti-common-space-8x)',
+  'ti-tabs-item-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-tabs-item-vertical-padding-horizontal': 'var(--ti-common-space-5x)',
+  'ti-tabs-item-active-border-weight': '2px',
+  'ti-tabs-item-active-border-style': 'solid',
+  'ti-tabs-item-active-border-color': 'var(--ti-tabs-header-font-active-border-color)',
+  'ti-tabs-item-bottom-border-weight': '1px',
+  'ti-tabs-item-bottom-border-style': 'solid',
+  'ti-tabs-item-bottom-border-color': '#f2f2f3',
+  'ti-tabs-item-card-active-bg-color': '#f7f7f9',
+  'ti-tabs-item-card-border-radius': 'var(--ti-common-border-radius-1) var(--ti-common-border-radius-1) 0 0',
+  'ti-tabs-icon-close-default-bg-color': '#d7d8da',
+  'ti-tabs-icon-close-hover-bg-color': 'var(--ti-base-color-common-7)',
+  'ti-tabs-icon-close-default-text-color': 'var(--ti-base-color-white)',
+  'ti-tabs-icon-close-hover-text-color': 'var(--ti-base-color-white)',
+  'ti-tabs-icon-size-close': '12px',
+  'ti-tabs-icon-close-margin-vertical': '0',
+  'ti-tabs-icon-close-margin-right': '0',
+  'ti-tabs-icon-close-margin-left': 'var(--ti-common-space-3x)',
+  // popover
+  'ti-popover-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
+  'ti-popover-text-color': '#dfe1e6',
+  'ti-popover-bg-color': '#464d6e',
+  'ti-popover-border-color': 'var(--ti-common-color-transparent)',
+  'ti-popover-title-text-color': '#dfe1e6',
+  'ti-popover-arrow-border-color': 'var(--ti-popover-bg-color)',
+  'ti-popover-placement-arrow-after-border-color': 'var(--ti-popover-arrow-border-color)',
+  'ti-popover-padding-vertical': '8px',
+  'ti-popover-padding-horizontal': '14px',
+  // tooltip
+  'ti-tooltip-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
+  'ti-tooltip-popper-border-color': '#464d6e',
+  'ti-tooltip-popper-dark-bg-color': '#464d6e',
+  'ti-tooltip-popper-light-text-color': '#464d6e',
+  'ti-tooltip-popper-light-border-color': '#464d6e',
+  'ti-tooltip-padding-vertical': '8px',
+  'ti-tooltip-padding-horizontal': '14px',
+  'ti-tooltip-color': '#dfe1e6',
+  'ti-tooltip-popper-dark-text-color': '#dfe1e6',
+
+  'ti-dropdown-menu-padding-vertical': '12px',
+  'ti-dropdown-menu-padding-horizontal': '12px',
+  'ti-dropdown-menu-box-shadow': 'var(--ti-common-shadow-2-down)',
+  'ti-dropdown-menu-margin-vertical': '8px',
+  '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',
+  'ti-split-trigger-bar-hover-bg-color': 'var(--ti-split-trigger-hover-bg-color)',
+  'ti-split-trigger-size': '2px',
+  'ti-split-trigger-bar-margin-left': '2px',
+  '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-shadow-2-down)',
+  'ti-date-picker-width': '249px',
+  'ti-date-picker-font-size': '12px',
+  'ti-date-table-td-today-border-color': 'var(--ti-common-color-transparent)',
+  'ti-date-table-td-today-text-color': 'var(--ti-base-color-brand-6)',
+  'ti-date-picker-current-border-radius': 'var(--ti-common-border-radius-normal)',
+  'ti-date-picker-hover-bg-color': 'var(--ti-common-color-selected-background)',
+  'ti-date-table-td-width': '30px',
+  'ti-date-table-td-height': '22px',
+  'ti-date-table-td-padding-vertical': '0',
+  'ti-date-table-td-padding-horizontal': '4px',
+  'ti-date-table-td-span-width': '22px',
+  'ti-date-table-td-span-height': '22px',
+  'ti-date-editor-input-icon-color-fill': '#d7d8da',
+  // grid
+  'ti-grid-header-background-color': '#fff',
+  'ti-grid-header-column-height': '42px',
+  'ti-grid-icon-fill-hover-bg-color': '#252b3a',
+  // modal
+  'ti-modal-box-width': '346px',
+  'ti-modal-header-padding-top': '20px',
+  'ti-modal-header-padding-horizontal': '20px',
+  'ti-modal-header-padding-bottom': '0',
+  'ti-modal-close-btn-font-size': '32px',
+  'ti-modal-body-padding-top': '20px',
+  'ti-modal-body-padding-horizontal': '20px',
+  'ti-modal-body-padding-bottom': '0',
+  'ti-modal-footer-padding-top': '18px',
+  'ti-modal-footer-padding-horizontal': '32px',
+  'ti-modal-footer-padding-bottom': '20px',
+  'ti-modal-close-btn-top': '18px',
+  'ti-modal-close-btn-scale': 'scale(1)',
+  'ti-modal-btn-text-color': '#71757f',
+  'ti-modal-close-btn-background-color-hover': '#ebebeb',
+  'ti-modal-footer-default-display-button': 'none',
+  'ti-modal-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
+  'ti-modal-footer-btn-border-radius': '4px',
+  'ti-modal-box-border-radius': '8px',
+  'ti-modal-close-btn-padding-horizontal-vertical': '5px',
+  // pager
+  'ti-pager-input-height': '26px',
+  'ti-pager-normal-text-color': '#71757f',
+  'ti-pager-poplist-item-padding-vertical': '0',
+  'ti-pager-poplist-item-padding-horizontal': '10px',
+  'ti-pager-poplist-item-unchecked-box-shadow': ' 0 1px 3px 0 rgba(37, 43, 58, 0.1)',
+  'ti-pager-poplist-item-hover-bg-color': 'var(--ti-common-color-transparent)',
+  'ti-pager-poplist-item-hover-border-color': 'var(--ti-common-color-line-dividing)',
+  'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-info-normal)',
+  // alert
+  'ti-alert-icon-font-size': 'var(--ti-common-font-size-2)',
+  'ti-alert-icon-margin-top': 'var(--ti-common-size-3)',
+  'ti-alert-close-font-size': 'var(--ti-common-font-size-2)',
+  'ti-alert-close-position-top': 'var(--ti-common-size-3x)',
+  'ti-alert-normal-padding-top': 'calc(var(--ti-common-size-3) * 3)',
+  'ti-alert-normal-padding-bottom': 'calc(var(--ti-common-size-3) * 3)',
+  'ti-alert-description-line-height': 'var(--ti-common-line-height-4)',
+  'ti-alert-success-bg-color': 'var(--ti-common-color-success-bg)',
+  'ti-alert-description-font-size': 'var(--ti-common-font-size-1)',
+  'ti-alert-success-border-color': 'var(--ti-common-color-transparent)',
+  'ti-alert-warning-border-color': 'var(--ti-common-color-transparent)',
+  'ti-alert-simple-border-color': 'var(--ti-common-color-transparent)',
+  'ti-alert-info-border-color': 'var(--ti-common-color-transparent)',
+  'ti-alert-error-border-color': 'var(--ti-common-color-transparent)',
+  'ti-alert-info-bg-color': 'var(--ti-common-color-bg-light-normal)',
+  'ti-alert-warning-bg-color': 'var(--ti-common-color-warn-bg)',
+  'ti-alert-error-bg-color': 'var(--ti-common-color-error-bg)',
+  'ti-alert-info-icon-color': 'var(--ti-common-color-primary-normal)',
+  'ti-alert-warning-icon-color': 'var(--ti-common-color-warn)',
+  'ti-alert-error-icon-color': 'var(--ti-common-color-error)',
+  'ti-alert-success-icon-color': 'var(--ti-common-color-success)',
+  // steps
+  'ti-steps-icon-size': '24px',
+  'ti-steps-done-icon-bg-color': 'var(--ti-common-color-success-normal)',
+  'ti-steps-done-active-border-color': 'var(--ti-common-color-success-normal)',
+  'ti-steps-done-icon-fill-color': '#fff',
+  'ti-steps-line-active-bg-color': 'var(--ti-common-color-border)',
+  'ti-steps-line-height': '1px',
+  'ti-steps-done-text-color': 'var(--ti-common-color-success-normal)',
+  // tag
+  'ti-tag-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-tag-height': 'var(--ti-common-size-5x)',
+  'ti-tag-close-font-size': 'var(--ti-common-font-size-base)',
+  // transfer
+  'ti-transfer-panel-width': '300px',
+  'ti-transfer-header-bg-color': '#fff',
+  'ti-transfer-header-border-color': 'var(--ti-common-color-line-dividing)',
+  'ti-transfer-panel-body-height': '320px',
+  'ti-transfer-panel-body-filter-height': '276px',
+  'ti-transfer-panel-item-height': '36px',
+  'ti-transfer-header-span-text-color': '#71757f',
+  'ti-transfer-button-border-radius': '100%',
+  'ti-transfer-button-disabled-bg-color': 'var(--ti-common-color-bg-disabled)',
+  // badge
+  'ti-badge-size': 'var(--ti-common-size-4x)',
+  'ti-badge-font-weight': 'var(--ti-common-font-weight-4)',
+  'ti-badge-border-radius': '100px',
+  // carousel
+  'ti-carousel-arrow-hover-bg-color': 'ti-common-color-selected-background',
+  'ti-carousel-arrow-bg-color': 'rgba(255,255,255,0.8)',
+  'ti-carousel-arrow-box-shadow': '0 8px 16px 0 rgba(37,43,58,.1)',
+  'ti-carousel-arrow-active-text-color': 'var(--ti-base-color-common-7)',
+  'ti-carousel-arrow-width': 'var(--ti-common-size-height-normal)',
+  'ti-carousel-arrow-height': 'var(--ti-common-size-height-normal)',
+  'ti-carousel-indicators-bg-color': 'none',
+  'ti-carousel-indicator-button-bg-color': '#71757f',
+  'ti-carousel-indicator-button-width': '6px',
+  'ti-carousel-indicator-button-height': '6px',
+  'ti-carousel-indicator-margin-right': 'var(--ti-common-size-2x)',
+  'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-info-normal)',
+  'ti-carousel-indicator-active-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-carousel-indicator-active-width': 'var(--ti-common-size-6x)',
+  'ti-carousel-hover-opacity': '1',
+  'ti-carousel-indicator-active-transition': 'all 0.1s cubic-bezier(0.645,0.045,0.355,1)',
+  'ti-carousel-indicator-active-background-color': '#71757f',
+  'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-6x)',
+  'ti-carousel-indicator-padding-vertical': '0',
+  'ti-carousel-indicator-padding-horizontal': '0',
+  'ti-carousel-indicator-active-transition-property': 'width',
+  // dialog-box
+  'ti-dialogbox-border-radius': 'var(--ti-common-border-radius-2)',
+  'ti-dialogbox-head-padding-top': '20px',
+  'ti-dialogbox-head-padding-horizontal': '20px',
+  'ti-dialogbox-head-padding-bottom': '0',
+  'ti-dialogbox-btn-background-color-hover': '#ebebeb',
+  'ti-dialogbox-head-font-icon-size': '20px',
+  'ti-dialogbox-close-icon-color': '#71757f',
+  'ti-dialogbox-close-icon-color-hover': '#71757f',
+  'ti-dialogbox-box-body-padding-vertical': '20px',
+  'ti-dialogbox-box-body-padding-horizontal': '20px',
+  'ti-dialogbox-box-body-margin-bottom': '0',
+  'ti-dialogbox-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
+  // notify
+  'ti-notify-max-width': '280px',
+  'ti-notify-bg-color': '#464d6e',
+  'ti-notify-text-color': 'var(--ti-base-color-common-1)',
+  'ti-notify-info-bg-color': 'var(--ti-notify-bg-color)',
+  'ti-notify-warning-bg-color': 'var(--ti-notify-bg-color)',
+  'ti-notify-error-bg-color': 'var(--ti-notify-bg-color)',
+  'ti-notify-success-bg-color': 'var(--ti-notify-bg-color)',
+  'ti-notify-close-icon-color': 'var(--ti-base-color-common-1)',
+  'ti-notify-title-text-color': 'var(--ti-base-color-common-1)',
+  'ti-notify-title-margin-top': '0',
+  'ti-notify-title-margin-horizontal': '0',
+  'ti-notify-title-margin-bottom': '8px',
+  'ti-notify-title-height': '25px',
+  'ti-notify-title-line-height': '25px',
+  'ti-notify-title-font-size': 'var(--ti-common-font-size-1)',
+  'ti-notify-content-font-size': 'var(--ti-common-font-size-1)',
+  'ti-notify-icon-size': 'var(--ti-common-font-size-2)',
+  'ti-notify-message-margin-vertical': '6px',
+  'ti-notify-message-margin-right': 0,
+  'ti-notify-message-margin-left': 0,
+  'ti-notify-border-radius': 'var(--ti-common-border-radius-1)',
+  // image-preview
+  'ti-image-viewer-close-bg-color': 'rgba(255,255,255,0.8)',
+  'ti-image-viewer-text-color': '#71757f',
+  'ti-image-viewer-close-top': '55px',
+  'ti-image-viewer-close-right': '20px',
+  'ti-image-viewer-close-width': 'var(--ti-common-size-9x)',
+  'ti-image-viewer-close-height': 'var(--ti-common-size-9x)',
+  'ti-image-viewer-close-font-size': '18px',
+  'ti-image-viewer-actions-width': '100%',
+  'ti-image-viewer-actions-height': '50px',
+  'ti-image-viewer-actions-bottom': '0',
+  'ti-image-viewer-actions-border-radius': 'none',
+  'ti-image-viewer-actions-inner-justify-content': 'center',
+  'ti-image-viewer-actions-inner-font-size': '18px',
+  'ti-image-viewer-actions-inner-text-color': '#71757f',
+  'ti-image-viewer-next-width': '36px',
+  'ti-image-viewer-next-height': '36px',
+  'ti-image-viewer-mask-wrap-bg-color': 'rgba(37,43,58,.2)',
+  'ti-image-viewer-close-bg-color-hover': 'var(--ti-common-color-selected-background)',
+  'ti-image-viewer-btn-opacity': '1',
+  'ti-image-viewer-mask-bg-color': 'var(--ti-common-color-transparent)',
+  // input
+  'ti-input-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-input-hover-border-color': 'var(--ti-common-color-border-hover)',
+  'ti-input-active-border-color': 'var(--ti-base-color-brand-7)',
+  'ti-input-height': '32px',
+  'ti-input-mini-height': '24px',
+  'ti-input-small-height': '32px',
+  'ti-input-medium-height': '40px',
+  // cascader
+  'ti-cascader-width': '300px',
+  'ti-cascader-medium-line-height': 'var(--ti-input-medium-height)',
+  'ti-cascader-small-line-height': 'var(--ti-input-small-height)',
+  'ti-cascader-mini-line-height': 'var(--ti-input-mini-height)',
+  'ti-cascader-menu-list-padding-vertical': 'var(--ti-common-space-3x)',
+  'ti-cascader-menu-list-padding-horizontal': 'var(--ti-common-space-3x)',
+  'ti-cascader-panel-node-height': '36px',
+  'ti-cascader-node-selectable-hover-bg-color': '#f2f2f3',
+  'ti-cascader-node-selectable-hover-text-color': 'var(--ti-base-color-brand-7)',
+  'ti-cascader-node-disabled-text-color': '#cfd0d3',
+  'ti-cascader-node-disabled-bg-color': '#f5f5f5',
+  'ti-cascader-node-icon-color': 'var(--ti-base-color-common-7)',
+  'ti-cascader-panel-node-label-padding-vertical': '0',
+  'ti-cascader-panel-node-label-padding-right': '30px',
+  'ti-cascader-panel-node-label-padding-left': '12px',
+  'ti-cascader-node-prefix-display': 'none',
+  'ti-cascader-node-label-padding-vertical': 0,
+  'ti-cascader-node-label-padding-horizontal': 0,
+  'ti-cascader-dropdown-box-shadow': '0 4px 8px 0 rgba(37, 43, 58, 0.2)',
+  'ti-cascader-dropdown-border-color': 'var(--ti-cascader-dropdown-bg-color)',
+  'ti-cascader-menu-border-color': 'var(--ti-common-color-hover-background)',
+  'ti-cascader-node-hover-bg-color': 'var(--ti-common-color-hover-background)',
+  'ti-cascader-menu-width': '200px',
+  'ti-cascader-panel-node-margin-top': 'var(--ti-common-space-base)',
+  'ti-cascader-tag-bg-color': 'var(--ti-base-color-brand-2)',
+  'ti-tag-info-text-color': '#71757f',
+  'ti-cascader-hover-border-color': '#71757f',
+  'ti-cascader-focus-border-color': 'var(--ti-base-color-brand-6)',
+  '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-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-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',
+  // search
+  'ti-search-input-btn-width': 'var(--ti-common-size-height-minor)'
+}
diff --git a/packages/theme/src/theme/infinity-theme/index.js b/packages/theme/src/theme/infinity-theme/index.js
index c1a0b3e62..cb67f57eb 100644
--- a/packages/theme/src/theme/infinity-theme/index.js
+++ b/packages/theme/src/theme/infinity-theme/index.js
@@ -10,7 +10,25 @@
  *
  */
 
-export const infinityTheme = {
+// 基础变量
+export const tinyBaseInfinityTheme = {
+  'ti-base-color-transparent': 'transparent', // 透明色
+
+  // 品牌主色
+  'ti-base-color-brand-6': '#5e7ce0', // 主色蓝
+  'ti-base-color-brand-2': '#e9edfa', // 品牌色-2
+
+  /* 1.4 功能色*/
+  'ti-base-color-error-3': '#f66f6a', // 错误-3
+  'ti-base-color-error-1': '#ffd5d4', // 错误-1
+
+  'ti-base-color-success-3': '#50d4ab', // 成功-3
+  'ti-base-color-success-1': '#cffcee', // 成功-1
+
+  // 告警色
+  'ti-base-color-warn-4': '#fa9841', // 告警-4
+  'ti-base-color-warn-1': '#ffe1c7', // 告警-1
+
   'ti-common-border-radius-normal': 'var(--ti-common-border-radius-1)',
   'ti-common-font-size-base': 'var(--ti-common-font-size-1)',
   'ti-common-color-line-dividing': '#f2f2f3',
@@ -35,366 +53,105 @@ export const infinityTheme = {
   'ti-common-dropdown-gap': '8px',
   'ti-common-color-bg-disabled': '#f5f5f5',
 
-  'ti-button-size-normal-height': 'var(--ti-common-space-8x)',
-  'ti-button-normal-background-color': '#ebebeb',
-  'ti-button-normal-border-color': 'var(--ti-base-color-transparent)',
-  'ti-button-normal-text-color': 'var(--ti-base-color-common-7)',
-  'ti-button-padding-vertical': '0',
-  'ti-button-normal-hover-bg-color': '#d1d1d1',
-  'ti-button-normal-hover-border-color': 'var(--ti-base-color-transparent)',
-  'ti-button-normal-hover-text-color': 'var(--ti-base-color-common-7)',
-  'ti-button-text-color': '#526ecc',
-  'ti-button-text-color-hover': 'var(--ti-base-color-brand-8)',
-  'ti-autocomplete-suggestion-border-color': '#fff',
-  'ti-autocomplete-suggestion-bg-color': '#fff',
-  'ti-autocomplete-li-hover-bg-color': 'var(--ti-common-color-hover-background)',
-  'ti-autocomplete-li-select-bg-color': '#f2f5fc',
-  'ti-autocomplete-li-height': '36px',
-  'ti-checkbox-border-color': '#d7d8da',
-  'ti-checkbox-border-color-hover': '#252b3a',
-  'ti-checkbox-icon-height': '6px',
-  'ti-checkbox-icon-width': '3px',
-  '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)',
-  'ti-radio-bordered-border-color': '#d7d8da',
-  'ti-radio-input-disabled-bg-color': '#f5f5f5',
-  'ti-switch-off-bg-color': '#d7d8da',
-  'ti-link-default-text-color': 'var(--ti-base-color-brand-7)',
-  'ti-link-default-hover-text-color': 'var(--ti-base-color-brand-8)',
-  'ti-numeric-input-normal-height': 'var(--ti-common-size-height-normal)',
-  'ti-numeric-input-width': '140px',
-  'ti-slider-height': '5px',
-  'ti-slider-range-height': '5px',
-  'ti-slider-handle-border-radius': '50%',
-  'ti-slider-handle-width': '14px',
-  'ti-slider-handle-height': '14px',
-  'ti-slider-range-top': '0',
-  'ti-slider-handle-top': '0',
-  'ti-slider-border-radius': '100px',
-  'ti-slider-range-border-radius': '100px',
-  'ti-slider-handle-border-weight': '2px',
-  'ti-slider-range-hover-bg-color': '#7693f5',
-  'ti-slider-handle-icon-display': 'none',
-  'ti-slider-tips-margin-left': '0',
-  'ti-slider-handle-transform': 'scale(1.3)',
-  'ti-slider-range-margin-top': '0',
-  'ti-slider-handle-margin-top': '-5px',
-  'ti-slider-handle-margin-horizontal': '-8px',
-  'ti-slider-handle-margin-bottom': '0',
-  'ti-slider-margin-vertical': '-8px',
-  'ti-slider-margin-right': '0',
-  'ti-slider-margin-left': '-4px',
-  'ti-time-panel-border-color': 'transparent',
-  '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',
-  'ti-time-spinner-list-border-color': 'var(--ti-common-color-line-dividing)',
-  'ti-time-panel-btn-cancel-display': 'none',
-  'ti-time-panel-btn-confirm-text-color': 'var(--ti-common-color-info-normal)',
-  'ti-time-panel-btn-bg-color': '#EBEBEB',
-  'ti-time-panel-btn-padding-vertical': '0',
-  'ti-time-panel-btn-padding-horizontal': '12px',
-  'ti-time-panel-btn-height': '24px',
-  'ti-time-panel-btn-min-width': '56px',
-  'ti-time-panel-btn-font-weight': 'normal',
-  'ti-time-panel-btn-confirm-hover-bg-color': 'var(--ti-button-normal-hover-bg-color)',
-  'ti-tree-node-content-current-bg-color': 'var(--ti-common-color-selected-background)',
-  'ti-tree-node-content-hover-bg-color': 'var(--ti-common-color-hover-background)',
-  // tabs
-  'ti-tabs-header-font-active-border-color': 'var(--ti-base-color-common-7)',
-  'ti-tabs-header-text-color': 'var(--ti-base-color-common-7)',
-  'ti-tabs-header-font-normal-text-color': '#71757f',
-  'ti-tabs-item-margin-right': 'var(--ti-common-space-8x)',
-  'ti-tabs-item-padding-horizontal': 'var(--ti-common-space-4x)',
-  'ti-tabs-item-vertical-padding-horizontal': 'var(--ti-common-space-5x)',
-  'ti-tabs-item-active-border-weight': '2px',
-  'ti-tabs-item-active-border-style': 'solid',
-  'ti-tabs-item-active-border-color': 'var(--ti-tabs-header-font-active-border-color)',
-  'ti-tabs-item-bottom-border-weight': '1px',
-  'ti-tabs-item-bottom-border-style': 'solid',
-  'ti-tabs-item-bottom-border-color': '#f2f2f3',
-  'ti-tabs-item-card-active-bg-color': '#f7f7f9',
-  'ti-tabs-item-card-border-radius': 'var(--ti-common-border-radius-1) var(--ti-common-border-radius-1) 0 0',
-  'ti-tabs-icon-close-default-bg-color': '#d7d8da',
-  'ti-tabs-icon-close-hover-bg-color': 'var(--ti-base-color-common-7)',
-  'ti-tabs-icon-close-default-text-color': 'var(--ti-base-color-white)',
-  'ti-tabs-icon-close-hover-text-color': 'var(--ti-base-color-white)',
-  'ti-tabs-icon-size-close': '12px',
-  'ti-tabs-icon-close-margin-vertical': '0',
-  'ti-tabs-icon-close-margin-right': '0',
-  'ti-tabs-icon-close-margin-left': 'var(--ti-common-space-3x)',
-  // popover
-  'ti-popover-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
-  'ti-popover-text-color': '#dfe1e6',
-  'ti-popover-bg-color': '#464d6e',
-  'ti-popover-border-color': 'transparent',
-  'ti-popover-title-text-color': '#dfe1e6',
-  'ti-popover-arrow-border-color': 'var(--ti-popover-bg-color)',
-  'ti-popover-placement-arrow-after-border-color': 'var(--ti-popover-arrow-border-color)',
-  'ti-popover-padding-vertical': '8px',
-  'ti-popover-padding-horizontal': '14px',
-  // tooltip
-  'ti-tooltip-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
-  'ti-tooltip-popper-border-color': '#464d6e',
-  'ti-tooltip-popper-dark-bg-color': '#464d6e',
-  'ti-tooltip-popper-light-text-color': '#464d6e',
-  'ti-tooltip-popper-light-border-color': '#464d6e',
-  'ti-tooltip-padding-vertical': '8px',
-  'ti-tooltip-padding-horizontal': '14px',
-  'ti-tooltip-color': '#dfe1e6',
-  'ti-tooltip-popper-dark-text-color': '#dfe1e6',
+  /**
+   * 12.28 尺寸
+   **/
+  '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-dropdown-menu-padding-vertical': '12px',
-  'ti-dropdown-menu-padding-horizontal': '12px',
-  'ti-dropdown-menu-box-shadow': 'var(--ti-common-shadow-2-down)',
-  'ti-dropdown-menu-margin-vertical': '8px',
-  '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',
-  'ti-split-trigger-bar-hover-bg-color': 'var(--ti-split-trigger-hover-bg-color)',
-  'ti-split-trigger-size': '2px',
-  'ti-split-trigger-bar-margin-left': '2px',
-  '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-shadow-2-down)',
-  'ti-date-picker-width': '249px',
-  'ti-date-picker-font-size': '12px',
-  'ti-date-table-td-today-border-color': 'transparent',
-  'ti-date-table-td-today-text-color': 'var(--ti-base-color-brand-6)',
-  'ti-date-picker-current-border-radius': 'var(--ti-common-border-radius-normal)',
-  'ti-date-picker-hover-bg-color': 'var(--ti-common-color-selected-background)',
-  'ti-date-table-td-width': '30px',
-  'ti-date-table-td-height': '22px',
-  'ti-date-table-td-padding-vertical': '0',
-  'ti-date-table-td-padding-horizontal': '4px',
-  'ti-date-table-td-span-width': '22px',
-  'ti-date-table-td-span-height': '22px',
-  'ti-date-editor-input-icon-color-fill': '#d7d8da',
-  // grid
-  'ti-grid-header-background-color': '#fff',
-  'ti-grid-header-column-height': '42px',
-  'ti-grid-icon-fill-hover-bg-color': '#252b3a',
-  // modal
-  'ti-modal-box-width': '346px',
-  'ti-modal-header-padding-top': '20px',
-  'ti-modal-header-padding-horizontal': '20px',
-  'ti-modal-header-padding-bottom': '0',
-  'ti-modal-close-btn-font-size': '32px',
-  'ti-modal-body-padding-top': '20px',
-  'ti-modal-body-padding-horizontal': '20px',
-  'ti-modal-body-padding-bottom': '0',
-  'ti-modal-footer-padding-top': '18px',
-  'ti-modal-footer-padding-horizontal': '32px',
-  'ti-modal-footer-padding-bottom': '20px',
-  'ti-modal-close-btn-top': '18px',
-  'ti-modal-close-btn-scale': 'scale(1)',
-  'ti-modal-btn-text-color': '#71757f',
-  'ti-modal-close-btn-background-color-hover': '#ebebeb',
-  'ti-modal-footer-default-display-button': 'none',
-  'ti-modal-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
-  'ti-modal-footer-btn-border-radius': '4px',
-  'ti-modal-box-border-radius': '8px',
-  'ti-modal-close-btn-padding-horizontal-vertical': '5px',
-  // pager
-  'ti-pager-input-height': '26px',
-  'ti-pager-normal-text-color': '#71757f',
-  'ti-pager-poplist-item-padding-vertical': '0',
-  'ti-pager-poplist-item-padding-horizontal': '10px',
-  'ti-pager-poplist-item-unchecked-box-shadow': ' 0 1px 3px 0 rgba(37, 43, 58, 0.1)',
-  'ti-pager-poplist-item-hover-bg-color': 'transparent',
-  'ti-pager-poplist-item-hover-border-color': 'var(--ti-common-color-line-dividing)',
-  'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-info-normal)',
-  // alert
-  'ti-alert-success-bg-color': '#cffcee',
-  'ti-alert-description-font-size': '14px',
-  'ti-alert-success-border-color': 'transparent',
-  'ti-alert-warning-border-color': 'transparent',
-  'ti-alert-info-border-color': 'transparent',
-  'ti-alert-error-border-color': 'transparent',
-  'ti-alert-nomal-content-line-height': '18px',
-  'ti-alert-info-bg-color': 'var(--ti-base-color-brand-2)',
-  'ti-alert-warning-bg-color': '#ffe1c7',
-  'ti-alert-error-bg-color': '#ffd5d4',
-  'ti-alert-close-font-size': '15px',
-  // steps
-  'ti-steps-icon-size': '24px',
-  'ti-steps-done-icon-bg-color': 'var(--ti-common-color-success-normal)',
-  'ti-steps-done-active-border-color': 'var(--ti-common-color-success-normal)',
-  'ti-steps-done-icon-fill-color': '#fff',
-  'ti-steps-line-active-bg-color': 'var(--ti-common-color-border)',
-  'ti-steps-line-height': '1px',
-  'ti-steps-done-text-color': 'var(--ti-common-color-success-normal)',
-  // tag
-  'ti-tag-border-radius': 'var(--ti-common-border-radius-1)',
-  'ti-tag-height': 'var(--ti-common-size-5x)',
-  'ti-tag-close-font-size': 'var(--ti-common-font-size-base)',
-  // transfer
-  'ti-transfer-panel-width': '300px',
-  'ti-transfer-header-bg-color': '#fff',
-  'ti-transfer-header-border-color': 'var(--ti-common-color-line-dividing)',
-  'ti-transfer-panel-body-height': '320px',
-  'ti-transfer-panel-body-filter-height': '276px',
-  'ti-transfer-panel-item-height': '36px',
-  'ti-transfer-header-span-text-color': '#71757f',
-  'ti-transfer-button-border-radius': '100%',
-  'ti-transfer-button-disabled-bg-color': 'var(--ti-common-color-bg-disabled)',
-  // badge
-  'ti-badge-size': 'var(--ti-common-size-4x)',
-  'ti-badge-font-weight': 'var(--ti-common-font-weight-4)',
-  'ti-badge-border-radius': '100px',
-  // carousel
-  'ti-carousel-arrow-hover-bg-color': 'ti-common-color-selected-background',
-  'ti-carousel-arrow-bg-color': 'rgba(255,255,255,0.8)',
-  'ti-carousel-arrow-box-shadow': '0 8px 16px 0 rgba(37,43,58,.1)',
-  'ti-carousel-arrow-active-text-color': 'var(--ti-base-color-common-7)',
-  'ti-carousel-arrow-width': 'var(--ti-common-size-height-normal)',
-  'ti-carousel-arrow-height': 'var(--ti-common-size-height-normal)',
-  'ti-carousel-indicators-bg-color': 'none',
-  'ti-carousel-indicator-button-bg-color': '#71757f',
-  'ti-carousel-indicator-button-width': '6px',
-  'ti-carousel-indicator-button-height': '6px',
-  'ti-carousel-indicator-margin-right': 'var(--ti-common-size-2x)',
-  'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-info-normal)',
-  'ti-carousel-indicator-active-border-radius': 'var(--ti-common-border-radius-1)',
-  'ti-carousel-indicator-active-width': 'var(--ti-common-size-6x)',
-  'ti-carousel-hover-opacity': '1',
-  'ti-carousel-indicator-active-transition': 'all 0.1s cubic-bezier(0.645,0.045,0.355,1)',
-  'ti-carousel-indicator-active-background-color': '#71757f',
-  'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-6x)',
-  'ti-carousel-indicator-padding-vertical': '0',
-  'ti-carousel-indicator-padding-horizontal': '0',
-  'ti-carousel-indicator-active-transition-property': 'width',
-  // dialog-box
-  'ti-dialogbox-border-radius': 'var(--ti-common-border-radius-2)',
-  'ti-dialogbox-head-padding-top': '20px',
-  'ti-dialogbox-head-padding-horizontal': '20px',
-  'ti-dialogbox-head-padding-bottom': '0',
-  'ti-dialogbox-btn-background-color-hover': '#ebebeb',
-  'ti-dialogbox-head-font-icon-size': '20px',
-  'ti-dialogbox-close-icon-color': '#71757f',
-  'ti-dialogbox-close-icon-color-hover': '#71757f',
-  'ti-dialogbox-box-body-padding-vertical': '20px',
-  'ti-dialogbox-box-body-padding-horizontal': '20px',
-  'ti-dialogbox-box-body-margin-bottom': '0',
-  'ti-dialogbox-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
-  // notify
-  'ti-notify-max-width': '280px',
-  'ti-notify-bg-color': '#464d6e',
-  'ti-notify-text-color': 'var(--ti-base-color-common-1)',
-  'ti-notify-info-bg-color': 'var(--ti-notify-bg-color)',
-  'ti-notify-warning-bg-color': 'var(--ti-notify-bg-color)',
-  'ti-notify-error-bg-color': 'var(--ti-notify-bg-color)',
-  'ti-notify-success-bg-color': 'var(--ti-notify-bg-color)',
-  'ti-alert-info-icon-color': 'var(--ti-base-color-brand-6)',
-  'ti-alert-warning-icon-color': 'var(--ti-base-color-warn-4)',
-  'ti-alert-error-icon-color': 'var(--ti-base-color-error-3)',
-  'ti-alert-success-icon-color': 'var(--ti-base-color-success-3)',
-  'ti-notify-close-icon-color': 'var(--ti-base-color-common-1)',
-  'ti-notify-title-text-color': 'var(--ti-base-color-common-1)',
-  'ti-notify-title-margin-top': '0',
-  'ti-notify-title-margin-horizontal': '0',
-  'ti-notify-title-margin-bottom': '8px',
-  'ti-notify-title-height': '25px',
-  'ti-notify-title-line-height': '25px',
-  'ti-notify-title-font-size': 'var(--ti-common-font-size-1)',
-  'ti-notify-content-font-size': 'var(--ti-common-font-size-1)',
-  'ti-notify-icon-size': 'var(--ti-common-font-size-2)',
-  'ti-notify-message-margin-vertical': '6px',
-  'ti-notify-message-margin-right': 0,
-  'ti-notify-message-margin-left': 0,
-  'ti-notify-border-radius': 'var(--ti-common-border-radius-1)',
-  // image-preview
-  'ti-image-viewer-close-bg-color': 'rgba(255,255,255,0.8)',
-  'ti-image-viewer-text-color': '#71757f',
-  'ti-image-viewer-close-top': '55px',
-  'ti-image-viewer-close-right': '20px',
-  'ti-image-viewer-close-width': 'var(--ti-common-size-9x)',
-  'ti-image-viewer-close-height': 'var(--ti-common-size-9x)',
-  'ti-image-viewer-close-font-size': '18px',
-  'ti-image-viewer-actions-width': '100%',
-  'ti-image-viewer-actions-height': '50px',
-  'ti-image-viewer-actions-bottom': '0',
-  'ti-image-viewer-actions-border-radius': 'none',
-  'ti-image-viewer-actions-inner-justify-content': 'center',
-  'ti-image-viewer-actions-inner-font-size': '18px',
-  'ti-image-viewer-actions-inner-text-color': '#71757f',
-  'ti-image-viewer-next-width': '36px',
-  'ti-image-viewer-next-height': '36px',
-  'ti-image-viewer-mask-wrap-bg-color': 'rgba(37,43,58,.2)',
-  'ti-image-viewer-close-bg-color-hover': 'var(--ti-common-color-selected-background)',
-  'ti-image-viewer-btn-opacity': '1',
-  'ti-image-viewer-mask-bg-color': 'transparent',
-  // input
-  'ti-input-border-radius': 'var(--ti-common-border-radius-1)',
-  'ti-input-hover-border-color': 'var(--ti-common-color-border-hover)',
-  'ti-input-active-border-color': 'var(--ti-base-color-brand-7)',
-  'ti-input-height': '32px',
-  'ti-input-mini-height': '24px',
-  'ti-input-small-height': '32px',
-  'ti-input-medium-height': '40px',
-  // cascader
-  'ti-cascader-width': '300px',
-  'ti-cascader-medium-line-height': 'var(--ti-input-medium-height)',
-  'ti-cascader-small-line-height': 'var(--ti-input-small-height)',
-  'ti-cascader-mini-line-height': 'var(--ti-input-mini-height)',
-  'ti-cascader-menu-list-padding-vertical': 'var(--ti-common-space-3x)',
-  'ti-cascader-menu-list-padding-horizontal': 'var(--ti-common-space-3x)',
-  'ti-cascader-panel-node-height': '36px',
-  'ti-cascader-node-selectable-hover-bg-color': '#f2f2f3',
-  'ti-cascader-node-selectable-hover-text-color': 'var(--ti-base-color-brand-7)',
-  'ti-cascader-node-disabled-text-color': '#cfd0d3',
-  'ti-cascader-node-disabled-bg-color': '#f5f5f5',
-  'ti-cascader-node-icon-color': 'var(--ti-base-color-common-7)',
-  'ti-cascader-panel-node-label-padding-vertical': '0',
-  'ti-cascader-panel-node-label-padding-right': '30px',
-  'ti-cascader-panel-node-label-padding-left': '12px',
-  'ti-cascader-node-prefix-display': 'none',
-  'ti-cascader-node-label-padding-vertical': 0,
-  'ti-cascader-node-label-padding-horizontal': 0,
-  'ti-cascader-dropdown-box-shadow': '0 4px 8px 0 rgba(37, 43, 58, 0.2)',
-  'ti-cascader-dropdown-border-color': 'var(--ti-cascader-dropdown-bg-color)',
-  'ti-cascader-menu-border-color': 'var(--ti-common-color-hover-background)',
-  'ti-cascader-node-hover-bg-color': 'var(--ti-common-color-hover-background)',
-  'ti-cascader-menu-width': '200px',
-  'ti-cascader-panel-node-margin-top': 'var(--ti-common-space-base)',
-  'ti-cascader-tag-bg-color': 'var(--ti-base-color-brand-2)',
-  'ti-tag-info-text-color': '#71757f',
-  'ti-cascader-hover-border-color': '#71757f',
-  'ti-cascader-focus-border-color': 'var(--ti-base-color-brand-6)',
-  '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-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-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',
-  // search
-  'ti-search-input-btn-width': 'var(--ti-common-size-height-minor)'
+  /*  其他尺寸 */
+  'ti-common-size-0': '0px', // 其他尺寸-1
+  'ti-common-size-auto': 'auto', // 其他尺寸-2
+  'ti-common-size-3': '3px', // 基础尺寸
+
+  /**
+   * 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
+
+  // 行高
+  'ti-common-line-height-4': '22px', // NewCssVar
+
+  /**
+   * 2.1 基础色
+   **/
+  'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
+
+  /* 浅底背景状态色*/
+  'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-2)',
+
+  /**
+   * 2.3 交互类型颜色
+   **/
+  'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)', // NewCssVar
+
+  /**
+   * 2.2 提示类型颜色
+   * 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
+   **/
+  'ti-common-color-error': 'var(--ti-base-color-error-3)', // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
+  'ti-common-color-error-bg': 'var(--ti-base-color-error-1)', // 错误-背景色/校验背景色
+
+  'ti-common-color-success': 'var(--ti-base-color-success-3)', // 成功-图标色/状态图标-成功
+  'ti-common-color-success-bg': 'var(--ti-base-color-success-1)', // 成功-背景色
+
+  'ti-common-color-warn': 'var(--ti-base-color-warn-4)', // 告警-图标色/状态图标-警告
+  'ti-common-color-warn-bg': 'var(--ti-base-color-warn-1)' // 告警-背景色
 }
+
+export * from './component-vars.js'