diff --git a/packages/theme/src/amount/index.less b/packages/theme/src/amount/index.less
index 77ba64f683..cf1ec86a63 100644
--- a/packages/theme/src/amount/index.less
+++ b/packages/theme/src/amount/index.less
@@ -20,9 +20,10 @@
 @radio-prefix-cls: ~'@{css-prefix}radio';
 
 .@{amount-prefix-cls} {
-  .component-css-vars-amount();
+  .inject-Amount-vars();
 
   width: 270px;
+
   &-filter-box {
     .popover-left {
       font-size: 12px;
@@ -31,8 +32,9 @@
 
   & &-input-icon {
     .@{svg-prefix-cls} {
-      fill: var(--ti-amount-icon-color);
-      font-size: var(--ti-amount-icon-font-size);
+      fill: var(--tv-Amount-icon-color);
+      width: var(--tv-Amount-icon-size);
+      height: var(--tv-Amount-icon-size);
     }
   }
 
@@ -47,14 +49,11 @@
       .@{radio-prefix-cls}-group {
         display: inline-block;
       }
+
       .popover-filter-botton {
         background-color: #f5f6f8;
-        padding-top: 1px;
-        padding-bottom: 1px;
         box-sizing: border-box;
-        margin-bottom: 8px;
-        margin-left: 0px;
-        margin-right: 8px;
+        margin: 0 8px 8px 0;
         display: inline-flex;
         justify-content: center;
         align-items: center;
@@ -63,16 +62,13 @@
         min-width: 48px;
         text-align: center;
         max-width: none;
-        padding-left: 8px;
-        padding-right: 8px;
-        border-width: 1px;
-        border-color: #f5f6f8;
-        border-style: solid;
+        padding: 1px 8px;
+        border: 1px solid #f5f6f8;
         font-style: normal;
 
         &.is-checked {
-          color: var(--ti-base-bg-color-2);
-          border-color:var(--ti-base-bg-color-2);
+          color: #fafafa;
+          border-color: #fafafa;
         }
 
         .@{radio-prefix-cls}__input {
@@ -80,8 +76,8 @@
         }
 
         .@{radio-prefix-cls}__label {
-          padding-left: 0px;
-          padding-right: 0px;
+          padding-left: 0;
+          padding-right: 0;
           line-height: 20px;
           height: 20px;
           display: inline-block;
@@ -90,7 +86,7 @@
 
       .popover-filter-botton:nth-child(4),
       .popover-filter-botton:nth-child(8) {
-        margin-right: 0px;
+        margin-right: 0;
       }
     }
 
@@ -108,6 +104,7 @@
           flex: 0 0 auto;
           margin-right: 8px;
           text-align: right;
+
           & + .tiny-date-container {
             width: 100%;
           }
diff --git a/packages/theme/src/amount/vars.less b/packages/theme/src/amount/vars.less
index 7be9b76293..d357647414 100644
--- a/packages/theme/src/amount/vars.less
+++ b/packages/theme/src/amount/vars.less
@@ -10,7 +10,7 @@
 *
 */
 
-.component-css-vars-amount() {
-  --ti-amount-icon-color: var(--ti-base-color-brand-6, #191919);
-  --ti-amount-icon-font-size: var(--ti-common-font-size-1, 14px);
+.inject-Amount-vars() {
+  --tv-Amount-icon-color: var(--tv-color-icon);
+  --tv-Amount-icon-size: var(--tv-icon-size);
 }
diff --git a/packages/theme/src/roles/index.less b/packages/theme/src/roles/index.less
index 02a3409572..e406ae5285 100644
--- a/packages/theme/src/roles/index.less
+++ b/packages/theme/src/roles/index.less
@@ -16,7 +16,7 @@
 @roles-prefix-cls: ~'@{css-prefix}roles';
 
 .@{roles-prefix-cls} {
-  .component-css-vars-roles();
+  .inject-Roles-vars();
 
   svg {
     margin-left: 2px;
@@ -43,25 +43,24 @@
   }
 
   &__poplist-item {
-    min-height: var(--ti-roles-poplist-item-height);
-    line-height: var(--ti-roles-poplist-item-height);
+    min-height: var(--tv-Roles-poplist-item-height);
+    line-height: var(--tv-Roles-poplist-item-height);
     max-width: 100%;
-    color: var(--ti-roles-poplist-item-text-color);
-    font-size: var(--ti-roles-poplist-item-font-size);
+    color: var(--tv-Roles-poplist-item-text-color);
+    font-size: var(--tv-Roles-poplist-item-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
 
     &:hover {
-      background: var(--ti-roles-poplist-item-hover-bg-color);
+      background: var(--tv-Roles-poplist-item-hover-bg-color);
     }
 
     &.is-selected {
       &,
       &:hover {
-        background: var(--ti-roles-poplist-item-selected-bg-color);
-        color: var(--ti-roles-poplist-item-selected-text-color);
+        background: var(--tv-Roles-poplist-item-selected-bg-color);
       }
     }
   }
diff --git a/packages/theme/src/roles/vars.less b/packages/theme/src/roles/vars.less
index de4ca5b51f..163b4225a5 100644
--- a/packages/theme/src/roles/vars.less
+++ b/packages/theme/src/roles/vars.less
@@ -10,11 +10,15 @@
 *
 */
 
-.component-css-vars-roles() {
-  --ti-roles-poplist-item-height: var(--ti-common-size-height-normal, 32px);
-  --ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-roles-poplist-item-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
-  --ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
-  --ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #191919);
+.inject-Roles-vars() {
+  // 下拉面板选项高度
+  --tv-Roles-poplist-item-height: var(--tv-size-height-md);
+  // 下拉面板选项字体颜色
+  --tv-Roles-poplist-item-text-color: var(--tv-color-text);
+  // 下拉面板选项字体尺寸
+  --tv-Roles-poplist-item-font-size: var(--tv-font-size-md);
+  // 下拉面板选项悬浮背景色
+  --tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
+  // 下拉面板选项选中色
+  --tv-Roles-poplist-item-selected-bg-color: var(--tv-color-bg-active);
 }
diff --git a/packages/theme/src/user-account/index.less b/packages/theme/src/user-account/index.less
index 20df194465..be6c6fdec3 100644
--- a/packages/theme/src/user-account/index.less
+++ b/packages/theme/src/user-account/index.less
@@ -17,19 +17,19 @@
 @logout-prefix-cls: ~'@{css-prefix}logout';
 
 .@{user-contact-prefix-cls} {
-  .component-css-vars-user-account();
+  .inject-UserAccount-vars();
 
   &__main {
     .user-account-pop {
-      padding: var(--ti-user-account-padding-vertical) var(--ti-user-account-padding-horizontal);
+      padding: 0 8px;
     }
 
     .user-account-custom {
-      line-height: var(--ti-user-account-line-height);
+      line-height: var(--tv-UserAccount-line-height);
     }
 
     .@{logout-prefix-cls} {
-      line-height: var(--ti-user-account-line-height);
+      line-height: var(--tv-UserAccount-line-height);
     }
   }
 }
diff --git a/packages/theme/src/user-account/vars.less b/packages/theme/src/user-account/vars.less
index 7105b80a9e..bc1cb7b9ab 100644
--- a/packages/theme/src/user-account/vars.less
+++ b/packages/theme/src/user-account/vars.less
@@ -10,8 +10,7 @@
 *
 */
 
-.component-css-vars-user-account() {
-  --ti-user-account-padding-vertical: 0;
-  --ti-user-account-padding-horizontal: var(--ti-common-space-2x, 8px);
-  --ti-user-account-line-height: 36px;
+.inject-UserAccount-vars() {
+  // 行高尺寸
+  --tv-UserAccount-line-height: 36px;
 }
diff --git a/packages/theme/src/user-card/index.less b/packages/theme/src/user-card/index.less
index eed4aaab66..c48b16a14a 100644
--- a/packages/theme/src/user-card/index.less
+++ b/packages/theme/src/user-card/index.less
@@ -16,9 +16,9 @@
 @card-prefix-cls: ~'@{css-prefix}card';
 
 .@{card-prefix-cls} {
-  .component-css-vars-user-card();
+  .inject-UserCard-vars();
 
-  border: 1px solid var(--ti-usercard-border-color);
+  border: 1px solid var(--tv-UserCard-border-color);
   box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
 
   .dialog-foot {
@@ -41,7 +41,7 @@
     img {
       width: 80px;
       height: 80px;
-      border-radius: var(--ti-usercard-image-border-radius, 3px);
+      border-radius: var(--tv-UserCard-image-border-radius, 3px);
     }
 
     .card-top-text {
@@ -64,25 +64,25 @@
   }
 
   .espace-online {
-    color: var(--ti-usercard-state-online-text-color);
+    color: var(--tv-UserCard-state-online-text-color);
   }
 
   .espace-busy {
-    color: var(--ti-usercard-state-busy-text-color);
+    color: var(--tv-UserCard-state-busy-text-color);
     font-size: 23px;
     vertical-align: middle;
     margin-top: -5px;
   }
 
   .espace-goaway {
-    color: var(--ti-usercard-state-goaway-text-color);
+    color: var(--tv-UserCard-state-goaway-text-color);
     background: #fff;
     border-radius: 50%;
     font-size: 13px;
   }
 
   .espace-offline {
-    color: var(--ti-usercard-state-offline-text-color);
+    color: var(--tv-UserCard-state-offline-text-color);
     font-size: 23px;
     vertical-align: middle;
     margin-top: -5px;
diff --git a/packages/theme/src/user-card/vars.less b/packages/theme/src/user-card/vars.less
index acf27b3764..cb71c5767d 100644
--- a/packages/theme/src/user-card/vars.less
+++ b/packages/theme/src/user-card/vars.less
@@ -10,11 +10,17 @@
 *
 */
 
-.component-css-vars-user-card() {
-  --ti-usercard-border-color: var(--ti-common-color-border, #999999);
-  --ti-usercard-image-border-radius: var(--ti-common-border-radius-normal, 6px);
-  --ti-usercard-state-online-text-color: #33cc00;
-  --ti-usercard-state-busy-text-color: #ff3300;
-  --ti-usercard-state-goaway-text-color: #ffae00;
-  --ti-usercard-state-offline-text-color: #aeaeae;
+.inject-UserCard-vars() {
+  // 卡片边框色
+  --tv-UserCard-border-color: var(--tv-color-border);
+  // 卡片圆角
+  --tv-UserCard-image-border-radius: var(--tv-border-radius-md);
+  // 在线文本色
+  --tv-UserCard-state-online-text-color: var(--tv-color-success-text);
+  // 忙碌文本色
+  --tv-UserCard-state-busy-text-color: var(--tv-color-error-text);
+  // 离开文本色
+  --tv-UserCard-state-goaway-text-color: var(--tv-color-warn-text);
+  // 离线文本色
+  --tv-UserCard-state-offline-text-color: var(--tv-color-text-disabled);
 }
diff --git a/packages/theme/src/user-contact/index.less b/packages/theme/src/user-contact/index.less
index 845c207559..0cef60369e 100644
--- a/packages/theme/src/user-contact/index.less
+++ b/packages/theme/src/user-contact/index.less
@@ -20,7 +20,7 @@
 @logout-prefix-cls: ~'@{css-prefix}logout';
 
 .@{user-contact-prefix-cls} {
-  .component-css-vars-user-contact();
+  .inject-UserContact-vars();
 
   position: relative;
   display: inline-block;
@@ -29,7 +29,7 @@
   & &__main {
     width: 300px;
     overflow: visible;
-    font-size: var(--ti-user-contact-roleInfo-font-size);
+    font-size: var(--tv-UserContact-role-info-font-size);
 
     .@{user-head-prefix-cls} {
       height: 100%;
@@ -59,23 +59,23 @@
     .@{user-contact-prefix-cls}__role-name {
       display: block;
       width: 100%;
-      color: var(--ti-user-contact-card-header-role-text-color);
+      color: var(--tv-UserContact-card-header-role-text-color);
       margin-bottom: 6px;
       height: 24px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--ti-user-contact-card-header-role-font-size);
+      font-size: var(--tv-UserContact-card-header-role-font-size);
       text-align: left;
     }
 
     .@{user-contact-prefix-cls}__role-number {
       display: block;
-      color: var(--ti-user-contact-card-header-roleNum-text-color);
+      color: var(--tv-UserContact-card-header-role-num-text-color);
     }
 
     .@{css-prefix}espace svg {
-      fill: var(--ti-user-contact-card-message-left-color);
+      fill: var(--tv-UserContact-card-message-left-color);
     }
 
     .card-tools {
@@ -84,35 +84,35 @@
   }
 
   & &__header {
-    line-height: 1.42857143;
-    border: 1px solid var(--ti-user-contact-card-border-color);
+    line-height: 1.5;
+    border: 1px solid var(--tv-UserContact-card-border-color);
     height: 86px;
-    background: var(--ti-user-contact-card-header-bg-color);
+    background: var(--tv-UserContact-card-header-bg-color);
     opacity: 0.9;
   }
 
   & &__title {
     display: block;
     height: 100%;
-    font-size: var(--ti-user-contact-roleInfo-font-size);
+    font-size: var(--tv-UserContact-role-info-font-size);
     font-weight: normal;
     line-height: 46px;
   }
 
   & &__role {
     display: inline-block;
-    color: var(--ti-user-contact-roleInfo-text-color);
-    margin-left: var(--ti-user-contact-role-desc-margin-left);
+    color: var(--tv-UserContact-role-info-text-color);
+    margin-left: 0;
     vertical-align: middle;
-    font-size: var(--ti-user-contact-roleInfo-font-size);
+    font-size: var(--tv-UserContact-role-info-font-size);
     line-height: 1.5;
   }
 
   & &__arrow {
     margin-left: 4px;
-    font-size: var(--ti-user-contact-roleInfo-font-size);
+    font-size: var(--tv-UserContact-role-info-font-size);
     vertical-align: middle;
-    fill: var(--ti-user-contact-roleInfo-text-color);
+    fill: var(--tv-UserContact-role-info-text-color);
   }
 
   & &__message {
@@ -133,10 +133,9 @@
   }
 
   & &__state-left {
-    color: var(--ti-user-contact-card-message-text-color);
+    color: var(--tv-UserContact-card-message-text-color);
     opacity: 1;
     font-size: var(--ti-common-font-size-base);
-    font-family: MicrosoftYaHei;
     line-height: 16px;
     text-align: left;
     width: auto;
@@ -144,10 +143,9 @@
   }
 
   & &__state-right {
-    color: var(--ti-user-contact-card-message-text-color);
+    color: var(--tv-UserContact-card-message-text-color);
     opacity: 1;
     font-size: var(--ti-common-font-size-base);
-    font-family: MicrosoftYaHei;
     line-height: 16px;
   }
 
@@ -165,7 +163,7 @@
 
   .@{card-template-prefix-cls}__body {
     padding: 0;
-    border: 1px solid var(--ti-user-contact-card-border-color);
+    border: 1px solid var(--tv-UserContact-card-border-color);
   }
 
   .@{user-head-prefix-cls} {
@@ -175,12 +173,12 @@
   }
 
   .@{espace-prefix-cls} {
-    padding: 0px 20px 10px;
+    padding: 0 20px 10px;
 
     .item-talk,
     .item-call,
     .item-email {
-      color: var(--ti-user-contact-card-espace-text-color);
+      color: var(--tv-UserContact-card-espace-text-color);
     }
   }
 
diff --git a/packages/theme/src/user-contact/vars.less b/packages/theme/src/user-contact/vars.less
index 3972b8f2a0..6f08e0e959 100644
--- a/packages/theme/src/user-contact/vars.less
+++ b/packages/theme/src/user-contact/vars.less
@@ -10,16 +10,23 @@
 *
 */
 
-.component-css-vars-user-contact() {
-  --ti-user-contact-roleInfo-text-color: var(--ti-common-color-text-weaken, #808080);
-  --ti-user-contact-roleInfo-font-size: var(--ti-common-font-size-0, 12px);
-  --ti-user-contact-card-message-text-color: var(--ti-common-color-placeholder, #808080);
-  --ti-user-contact-card-border-color: #ddd;
-  --ti-user-contact-card-header-bg-color: #3f4251;
-  --ti-user-contact-card-header-role-text-color: var(--ti-common-color-light, #ffffff);
-  --ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2, 16px);
-  --ti-user-contact-card-header-roleNum-text-color: #b9babc;
-  --ti-user-contact-card-espace-text-color: var(--ti-common-color-placeholder, #808080);
-  // 描述左外边距
-  --ti-user-contact-role-desc-margin-left: var(--ti-common-space-0, 0px);
+.inject-UserContact-vars() {
+  // 文本颜色
+  --tv-UserContact-role-info-text-color: var(--tv-color-text-weaken);
+  // 文字尺寸
+  --tv-UserContact-role-info-font-size: var(--tv-font-size-sm);
+  // 提示信息文字颜色
+  --tv-UserContact-card-message-text-color: var(--tv-color-text-weaken);
+  // 卡片边框颜色
+  --tv-UserContact-card-border-color: var(--tv-color-border);
+  // 卡片头部背景色
+  --tv-UserContact-card-header-bg-color: var(--tv-color-bg-gray-2);
+  // 头像字体颜色
+  --tv-UserContact-card-header-role-text-color: var(--tv-color-text-white);
+  // 头像字体大小
+  --tv-UserContact-card-header-role-font-size: var(--tv-font-size-md);
+  // 头像数字字体颜色
+  --tv-UserContact-card-header-role-num-text-color: var(--tv-color-text-weaken);
+  // espace字体颜色
+  --tv-UserContact-card-espace-text-color: var(--tv-color-text-weaken);
 }
diff --git a/packages/theme/src/user-head/index.less b/packages/theme/src/user-head/index.less
index 88e78561a3..ff970ac84e 100644
--- a/packages/theme/src/user-head/index.less
+++ b/packages/theme/src/user-head/index.less
@@ -16,38 +16,38 @@
 @user-head-prefix-cls: ~'@{css-prefix}user-head';
 
 .@{user-head-prefix-cls} {
-  .component-css-vars-user-head();
+  .inject-UserHead-vars();
 
   display: inline-block;
   position: relative;
 
   &__portrait {
     overflow: hidden;
-    width: var(--ti-userhead-head-normal-size);
-    height: var(--ti-userhead-head-normal-size);
-    line-height: var(--ti-userhead-head-normal-size);
+    width: var(--tv-UserHead-head-normal-size);
+    height: var(--tv-UserHead-head-normal-size);
+    line-height: var(--tv-UserHead-head-normal-size);
     text-align: center;
-    border-radius: var(--ti-userhead-head-border-radius);
+    border-radius: var(--tv-UserHead-head-border-radius);
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
-    background-color: var(--ti-userhead-head-bg-color, #bbbbbb);
+    background-color: var(--tv-UserHead-head-bg-color, #bbbbbb);
 
     &.round {
       border-radius: 50%;
     }
 
     &.min {
-      width: var(--ti-userhead-head-small-size);
-      height: var(--ti-userhead-head-small-size);
-      line-height: var(--ti-userhead-head-small-size);
+      width: var(--tv-UserHead-head-small-size);
+      height: var(--tv-UserHead-head-small-size);
+      line-height: var(--tv-UserHead-head-small-size);
     }
 
     &.icon {
-      font-size: var(--ti-userhead-head-icon-size-normal);
+      font-size: var(--tv-UserHead-head-icon-size-normal);
 
       &.min {
-        font-size: var(--ti-userhead-head-icon-small-size);
+        font-size: var(--tv-UserHead-head-icon-small-size);
       }
 
       svg {
diff --git a/packages/theme/src/user-head/vars.less b/packages/theme/src/user-head/vars.less
index 646b79f2d9..2ac6f84d64 100644
--- a/packages/theme/src/user-head/vars.less
+++ b/packages/theme/src/user-head/vars.less
@@ -10,11 +10,11 @@
 *
 */
 
-.component-css-vars-user-head() {
-  --ti-userhead-head-normal-size: var(--ti-common-size-18x, 72px);
-  --ti-userhead-head-small-size: 30px;
-  --ti-userhead-head-icon-size-normal: var(--ti-common-size-10x, 40px);
-  --ti-userhead-head-icon-small-size: 14px;
-  --ti-userhead-head-border-radius: var(--ti-common-border-radius-1, 2px);
-  --ti-userhead-head-bg-color: #bbbbbb;
+.inject-UserHead-vars() {
+  --tv-UserHead-head-normal-size: 72px;
+  --tv-UserHead-head-small-size: 30px;
+  --tv-UserHead-head-icon-size-normal: 40px;
+  --tv-UserHead-head-icon-small-size: 14px;
+  --tv-UserHead-head-border-radius: var(--tv-border-radius-xs);
+  --tv-UserHead-head-bg-color: #bbbbbb;
 }
diff --git a/packages/theme/src/user-link/index.less b/packages/theme/src/user-link/index.less
index 29fca922fd..b9f75c9991 100644
--- a/packages/theme/src/user-link/index.less
+++ b/packages/theme/src/user-link/index.less
@@ -17,14 +17,14 @@
 @user-card-prefix-cls: ~'@{css-prefix}user-card';
 
 .@{userlink-prefix-cls} {
-  .component-css-vars-user-link();
+  .inject-UserLink-vars();
 
   li {
     float: left;
     list-style: none;
 
     .@{css-prefix}popover__reference {
-      font-size: var(--ti-common-font-size-base);
+      font-size: var(--tv-UserLink-font-size);
       color: #1890ff;
 
       &:hover {
@@ -42,9 +42,9 @@
 
 .@{user-card-prefix-cls} {
   .card-box {
-    font-size: var(--ti-user-link-font-size);
-    color: var(--ti-user-link-text-color);
-    font-weight: var(--ti-user-link-font-weight);
+    font-size: var(--tv-UserLink-font-size);
+    color: var(--tv-UserLink-text-color);
+    font-weight: var(--tv-UserLink-font-weight);
 
     .card-box__body {
       .card-top-img,
@@ -55,7 +55,7 @@
 
       .card-top-img {
         width: 80px;
-        border-radius: var(--ti-user-link-border-radius);
+        border-radius: var(--tv-UserLink-border-radius);
 
         img {
           width: 100%;
diff --git a/packages/theme/src/user-link/vars.less b/packages/theme/src/user-link/vars.less
index 810e9f25bc..9503952131 100644
--- a/packages/theme/src/user-link/vars.less
+++ b/packages/theme/src/user-link/vars.less
@@ -10,9 +10,9 @@
 *
 */
 
-.component-css-vars-user-link() {
-  --ti-user-link-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-user-link-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-user-link-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-user-link-border-radius: var(--ti-common-border-radius-normal, 6px);
+.inject-UserLink-vars() {
+  --tv-UserLink-font-size: var(--tv-font-size-md);
+  --tv-UserLink-text-color: var(--tv-color-text);
+  --tv-UserLink-font-weight: var(--tv-font-weight-bold);
+  --tv-UserLink-border-radius: var(--tv-border-radius-md);
 }
diff --git a/packages/theme/src/user/index.less b/packages/theme/src/user/index.less
index f037207cb6..2b05f2af19 100644
--- a/packages/theme/src/user/index.less
+++ b/packages/theme/src/user/index.less
@@ -20,7 +20,7 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{user-prefix-cls} {
-  .component-css-vars-user();
+  .inject-User-vars();
 
   &.mini {
     height: 30px;
@@ -31,11 +31,11 @@
 
     .@{input-prefix-cls} {
       .@{svg-prefix-cls} {
-        fill: var(--ti-user-svg-text-color);
+        fill: var(--tv-User-svg-color);
       }
 
       &.is-disabled .@{svg-prefix-cls} {
-        fill: var(--ti-input-normal-disabled-color);
+        fill: var(--tv-User-svg-color-disabled);
       }
     }
 
@@ -46,14 +46,14 @@
 
   & &__ghost {
     &.@{tag-prefix-cls} {
-      background: var(--ti-user-tag-bg-color);
+      background: var(--tv-User-tag-bg-color);
     }
   }
 
   &_select {
     max-width: calc(50% - 4px);
     width: auto;
-    font-size: var(--ti-user-font-size);
+    font-size: var(--tv-User-font-size);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/theme/src/user/vars.less b/packages/theme/src/user/vars.less
index ee21a53f8a..9b94191fa2 100644
--- a/packages/theme/src/user/vars.less
+++ b/packages/theme/src/user/vars.less
@@ -10,8 +10,13 @@
 *
 */
 
-.component-css-vars-user() {
-  --ti-user-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-user-tag-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
-  --ti-user-svg-text-color: var(--ti-base-color-brand-6, #191919);
+.inject-User-vars() {
+  // 字体尺寸
+  --tv-User-font-size: var(--tv-font-size-md);
+  // 选中项标签背景颜色
+  --tv-User-tag-bg-color: var(--tv-color-bg);
+  // 人员图标颜色
+  --tv-User-svg-color: var(--tv-color-icon);
+  // 人员图标禁用颜色
+  --tv-User-svg-color-disabled: var(--tv-color-icon-disabled);
 }