From c5af3d949b7a16d5ccc5b44f9f96a7e23a5de52c Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 30 Sep 2024 11:06:26 +0800
Subject: [PATCH 1/3] refactor(theme): [qr-code,text-popup,watemark,rate]
 refactor some components theme vars

---
 packages/theme/src/base/vars.less            |  1 +
 packages/theme/src/bulletin-board/index.less | 68 +++++++++---------
 packages/theme/src/bulletin-board/vars.less  | 72 ++++++++++++--------
 packages/theme/src/dept/index.less           | 18 ++---
 packages/theme/src/dept/vars.less            | 14 ++--
 packages/theme/src/drop-roles/vars.less      | 11 ---
 packages/theme/src/espace/index.less         |  8 +--
 packages/theme/src/espace/vars.less          |  8 +--
 packages/theme/src/fullscreen/vars.less      | 11 ---
 packages/theme/src/qr-code/index.less        |  4 +-
 packages/theme/src/qr-code/vars.less         | 14 ----
 packages/theme/src/rate/index.less           | 14 ++--
 packages/theme/src/rate/vars.less            | 10 +--
 packages/theme/src/skeleton-item/index.less  | 38 +++++------
 packages/theme/src/skeleton-item/vars.less   | 33 ++++-----
 packages/theme/src/skeleton/index.less       | 20 +++---
 packages/theme/src/skeleton/vars.less        | 14 +---
 packages/theme/src/text-popup/index.less     |  4 +-
 packages/theme/src/text-popup/vars.less      | 22 +++---
 packages/theme/src/watermark/index.less      |  3 -
 packages/theme/src/watermark/vars.less       | 14 ----
 21 files changed, 172 insertions(+), 229 deletions(-)
 delete mode 100644 packages/theme/src/drop-roles/vars.less
 delete mode 100644 packages/theme/src/fullscreen/vars.less
 delete mode 100644 packages/theme/src/qr-code/vars.less
 delete mode 100644 packages/theme/src/watermark/vars.less

diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
index 181a876e94..8cdf864c8e 100644
--- a/packages/theme/src/base/vars.less
+++ b/packages/theme/src/base/vars.less
@@ -376,6 +376,7 @@
   --tv-font-weight-bold: 600;
 
   /** 4. 圆角变量 **/
+  --tv-border-radius-xs: 2px;
   --tv-border-radius-sm: 4px;
   --tv-border-radius-md: 6px;
   --tv-border-radius-lg: 8px;
diff --git a/packages/theme/src/bulletin-board/index.less b/packages/theme/src/bulletin-board/index.less
index dfd007e609..b496ffd22e 100644
--- a/packages/theme/src/bulletin-board/index.less
+++ b/packages/theme/src/bulletin-board/index.less
@@ -18,20 +18,19 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{bulletin-board-prefix-cls} {
-  .component-css-vars-bulletin-board();
+  .inject-BulletinBoard-vars();
 
   &__item {
-    margin-bottom: var(--ti-bulletin-board-item-margin-bottom);
+    margin-bottom: 24px;
 
     .@{bulletin-board-prefix-cls}__textTitle {
       display: block;
-      color: var(--ti-bulletin-board-item-title-text-color);
-      margin-bottom: var(--ti-bulletin-board-item-title-text-margin-bottom);
+      color: var(--tv-BulletinBoard-item-title-text-color);
+      margin-bottom: 8px;
       font-size: var(--ti-common-font-size-base);
       white-space: normal;
-      font-family: Helvetica, Arial, 'microsoft yahei';
       line-height: initial;
-      font-weight: var(--ti-bulletin-board-item-title-font-weight);
+      font-weight: var(--tv-BulletinBoard-item-title-font-weight);
 
       &,
       &:hover {
@@ -40,32 +39,32 @@
     }
 
     .@{bulletin-board-prefix-cls}__textDate {
-      color: var(--ti-bulletin-board-item-date-text-color);
-      font-size: var(--ti-bulletin-board-item-date-font-size);
+      color: var(--tv-BulletinBoard-item-date-text-color);
+      font-size: var(--tv-BulletinBoard-item-date-font-size);
     }
   }
 
   &__title {
-    font-size: var(--ti-bulletin-board-title-font-size);
-    padding: 12px 0px 8px 24px;
-    color: var(--ti-bulletin-board-title-text-color);
-    font-weight: var(--ti-bulletin-board-title-font-weight);
+    font-size: var(--tv-BulletinBoard-title-font-size);
+    padding: 12px 0 8px 24px;
+    color: var(--tv-BulletinBoard-title-text-color);
+    font-weight: var(--tv-BulletinBoard-title-font-weight);
   }
 
   &__more {
     text-align: right;
 
     & &-link {
-      color: var(--ti-bulletin-board-more-text-color);
-      font-size: var(--ti-bulletin-board-more-font-size);
+      color: var(--tv-BulletinBoard-more-text-color);
+      font-size: var(--tv-BulletinBoard-more-font-size);
       line-height: normal;
       display: inline-flex;
       justify-content: center;
       align-items: center;
 
       .@{svg-prefix-cls} {
-        fill: var(--ti-bulletin-board-more-text-color);
-        font-size: var(--ti-bulletin-board-more-icon-font-size);
+        fill: var(--tv-BulletinBoard-more-icon-color);
+        font-size: var(--tv-BulletinBoard-more-icon-font-size);
         margin-left: 4px;
       }
 
@@ -73,24 +72,23 @@
         text-decoration: none;
 
         .@{svg-prefix-cls} {
-          fill: var(--ti-bulletin-board-more-hover-text-color);
+          fill: var(--tv-BulletinBoard-more-icon-color-hover);
         }
       }
     }
   }
 
   &__new {
-    background-color: var(--ti-bulletin-board-new-bg-color);
-    color: var(--ti-bulletin-board-new-text-color);
-    border-radius: var(--ti-bulletin-board-new-border-radius);
-    padding: 0 var(--ti-bulletin-board-new-padding-left);
-    margin-left: var(--ti-bulletin-board-new-margin-left);
+    background-color: var(--tv-BulletinBoard-new-bg-color);
+    color: var(--tv-BulletinBoard-new-text-color);
+    border-radius: var(--tv-BulletinBoard-new-border-radius);
+    padding: 0 4px;
+    margin-left: 6px;
     min-width: 30px;
     min-height: 16px;
     line-height: 16px;
-    font-size: var(--ti-bulletin-board-new-font-size);
+    font-size: var(--tv-BulletinBoard-new-font-size);
     display: inline-block;
-    font-family: var(--ti-bulletin-board-new-font-family);
     box-sizing: border-box;
     font-weight: 500;
     text-align: center;
@@ -143,13 +141,13 @@
     .@{tabs-prefix-cls}__item {
       line-height: 36px;
       height: 36px;
-      padding: 0 var(--ti-bulletin-board-tabs-item-text-padding-right);
+      padding: 0;
       box-sizing: border-box;
       display: inline-block;
       list-style: none;
       font-size: var(--ti-common-font-size-1);
       font-weight: 500;
-      color: var(--ti-bulletin-board-tabs-item-text-color);
+      color: var(--tv-BulletinBoard-tabs-item-text-color);
       position: relative;
 
       &:focus,
@@ -158,18 +156,16 @@
       }
 
       &:hover {
-        color: var(--ti-bulletin-board-tabs-item-hover-text-color);
         cursor: pointer;
-        font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
+        font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
       }
 
       &.is-active {
-        color: var(--ti-bulletin-board-tabs-item-hover-text-color);
-        font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
+        font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
       }
 
       &.is-disabled {
-        color: var(--ti-bulletin-board-tabs-item-disabled-text-color);
+        color: var(--tv-BulletinBoard-tabs-item-disabled-text-color);
         cursor: default;
       }
 
@@ -201,15 +197,15 @@
         }
       }
 
-      &::before {
-        bottom: 0px;
+      &:before {
+        bottom: 0;
         top: auto !important;
         left: auto !important;
       }
     }
 
     .@{tabs-prefix-cls}__content {
-      padding: 12px var(--ti-bulletin-board-contentr-padding-right) var(--ti-bulletin-board-contentr-padding-button);
+      padding: 12px 0 0;
     }
 
     &.@{tabs-prefix-cls}--card {
@@ -224,7 +220,7 @@
       }
 
       > .@{tabs-prefix-cls}__header {
-        border-bottom: 1px solid var(--ti-bulletin-board-tabs-header-border-color);
+        border-bottom: 1px solid var(--tv-BulletinBoard-tabs-header-border-color);
 
         .@{tabs-prefix-cls}__item {
           border-bottom: 1px solid transparent;
@@ -249,7 +245,7 @@
               content: '';
               width: 100%;
               height: 3px;
-              background: var(--ti-bulletin-board-tabs-item-hover-text-color);
+              background: var(--tv-BulletinBoard-tabs-item-bg-color);
               margin-left: -24px;
             }
           }
diff --git a/packages/theme/src/bulletin-board/vars.less b/packages/theme/src/bulletin-board/vars.less
index 5c22573589..08e3c0e221 100644
--- a/packages/theme/src/bulletin-board/vars.less
+++ b/packages/theme/src/bulletin-board/vars.less
@@ -10,33 +10,47 @@
 *
 */
 
-.component-css-vars-bulletin-board() {
-  --ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px);
-  --ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-bulletin-board-item-title-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-space-2x, 8px);
-  --ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-bold, 600);
-  --ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-bold, 600);
-  --ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-contentr-padding-right: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-contentr-padding-button: var(--ti-common-space-0, 0px);
-  --ti-bulletin-board-new-padding-left: var(--ti-common-size-base, 4px);
-  --ti-bulletin-board-new-margin-left: var(--ti-common-space-6, 6px);
-  --ti-bulletin-board-new-font-family: PingFangSC ,PingFangSC-Regular;
-  --ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x, 24px);
-  --ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #808080);
-  --ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-bulletin-board-new-bg-color: var(--ti-common-color-error-border-secondary, #fce3e1);
-  --ti-bulletin-board-new-text-color: var(--ti-common-color-error-border, #f23030);
-  --ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-1, 2px);
-  --ti-bulletin-board-more-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
-  --ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px);
-  --ti-bulletin-board-new-font-size: var(--ti-common-font-size-0, 12px);
-  --ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-bulletin-board-tabs-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
-  --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #808080);
-  --ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #999999);
+.inject-BulletinBoard-vars() {
+  // 标题字号
+  --tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
+  // 标题字重
+  --tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
+  // 标题文字颜色
+  --tv-BulletinBoard-title-text-color: var(--tv-color-text);
+  // 子项文字颜色
+  --tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
+  // tabs标题想文字hover字重
+  --tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
+  // 子项标题文字字重
+  --tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
+  // 子项日期文字颜色
+  --tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
+  // 子项日期文字尺寸
+  --tv-BulletinBoard-item-date-font-size: var(--tv-font-size-md);
+  // new标签背景颜色
+  --tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
+  // new标签文字颜色
+  --tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
+  // new标签边框圆角
+  --tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
+  // new标签文字大小
+  --tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
+  // 更多按钮文字颜色
+  --tv-BulletinBoard-more-text-color: var(--tv-color-text);
+  // 更多按钮图标颜色
+  --tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
+  // 更多按钮图标悬浮颜色
+  --tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
+  // 更多按钮文字尺寸
+  --tv-BulletinBoard-more-font-size: var(--tv-font-size-md);
+  // 更多按钮图标尺寸
+  --tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-md);
+  // tabs标签文字颜色
+  --tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
+  // tabs标签背景颜色
+  --tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
+  // tabs标签文字禁用颜色
+  --tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
+  // tabs标签头部边框颜色
+  --tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
 }
diff --git a/packages/theme/src/dept/index.less b/packages/theme/src/dept/index.less
index 48940e1e40..7c3951f95e 100644
--- a/packages/theme/src/dept/index.less
+++ b/packages/theme/src/dept/index.less
@@ -19,7 +19,7 @@
 @col-prefix-cls: ~'@{css-prefix}col';
 
 .@{dept-prefix-cls} {
-  .component-css-vars-dept();
+  .inject-Dept-vars();
 
   &__search {
     margin-bottom: 12px;
@@ -27,9 +27,9 @@
 
   &__text,
   &__label {
-    font-size: var(--ti-dept-label-font-size);
-    color: var(--ti-dept-label-text-color);
-    font-weight: var(--ti-dept-label-font-weight);
+    font-size: var(--tv-Dept-label-font-size);
+    color: var(--tv-Dept-label-text-color);
+    font-weight: var(--tv-Dept-label-font-weight);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -45,11 +45,11 @@
   }
 
   &__selected-info {
-    color: var(--ti-dept-selected-info-text-color);
-    font-size: var(--ti-dept-label-font-size);
-    background: var(--ti-dept-selected-info-bg-color);
+    color: var(--tv-Dept-selected-info-text-color);
+    font-size: var(--tv-Dept-label-font-size);
+    background: var(--tv-Dept-selected-info-bg-color);
     padding: 5px;
-    border-radius: var(--ti-dept-selected-info-border-radius);
+    border-radius: var(--tv-Dept-selected-info-border-radius);
   }
 
   &__item {
@@ -75,6 +75,6 @@
 
   .@{input-prefix-cls}__icon {
     vertical-align: middle;
-    fill: var(--ti-dept-selected-info-text-color);
+    fill: var(--tv-Dept-selected-info-text-color);
   }
 }
diff --git a/packages/theme/src/dept/vars.less b/packages/theme/src/dept/vars.less
index 5247957593..c546053eb1 100644
--- a/packages/theme/src/dept/vars.less
+++ b/packages/theme/src/dept/vars.less
@@ -10,11 +10,11 @@
 *
 */
 
-.component-css-vars-dept() {
-  --ti-dept-label-font-size: var(--ti-common-font-size-base, 14px);
-  --ti-dept-label-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #191919);
-  --ti-dept-selected-info-bg-color: #f1f1f1;
-  --ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 6px);
+.inject-Dept-vars() {
+  --tv-Dept-label-font-size: var(--tv-font-size-md);
+  --tv-Dept-label-text-color: var(--tv-color-text);
+  --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
+  --tv-Dept-selected-info-text-color: var(--tv-color-text);
+  --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
+  --tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
 }
diff --git a/packages/theme/src/drop-roles/vars.less b/packages/theme/src/drop-roles/vars.less
deleted file mode 100644
index 7925ec7935..0000000000
--- a/packages/theme/src/drop-roles/vars.less
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
-* 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.
-*
-*/
diff --git a/packages/theme/src/espace/index.less b/packages/theme/src/espace/index.less
index de0de1fac1..bf4f21e7c1 100644
--- a/packages/theme/src/espace/index.less
+++ b/packages/theme/src/espace/index.less
@@ -17,7 +17,7 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{espace-prefix-cls} {
-  .component-css-vars-espace();
+  .inject-Espace-vars();
 
   .item-talk,
   .item-call,
@@ -26,13 +26,13 @@
     line-height: 1;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-espace-text-color);
-      font-size: var(--ti-espace-font-size);
+      fill: var(--tv-Espace-icon-color);
+      font-size: var(--tv-Espace-font-size);
     }
 
     &:hover {
       .@{svg-prefix-cls} {
-        fill: var(--ti-espace-hover-text-color);
+        fill: var(--tv-Espace-icon-color-hover);
       }
     }
   }
diff --git a/packages/theme/src/espace/vars.less b/packages/theme/src/espace/vars.less
index f8b6b07c99..61962bf0d1 100644
--- a/packages/theme/src/espace/vars.less
+++ b/packages/theme/src/espace/vars.less
@@ -10,8 +10,8 @@
 *
 */
 
-.component-css-vars-espace() {
-  --ti-espace-font-size: 26px;
-  --ti-espace-text-color: var(--ti-base-color-brand-6, #191919);
-  --ti-espace-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
+.inject-Espace-vars() {
+  --tv-Espace-font-size: 26px;
+  --tv-Espace-icon-color: var(--tv-color-icon);
+  --tv-Espace-icon-color-hover: var(--tv-color-icon-hover);
 }
diff --git a/packages/theme/src/fullscreen/vars.less b/packages/theme/src/fullscreen/vars.less
deleted file mode 100644
index 7925ec7935..0000000000
--- a/packages/theme/src/fullscreen/vars.less
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
-* 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.
-*
-*/
diff --git a/packages/theme/src/qr-code/index.less b/packages/theme/src/qr-code/index.less
index 0ba4be0c59..e7b269eecc 100644
--- a/packages/theme/src/qr-code/index.less
+++ b/packages/theme/src/qr-code/index.less
@@ -10,16 +10,14 @@
 *
 */
 @import '../custom.less';
-@import './vars.less';
 
 @qr-code-prefix-cls: ~'@{css-prefix}qr-code';
 
 .@{qr-code-prefix-cls} {
-  .component-css-vars-qr-code();
-
   &-container {
     position: relative;
     padding: 12px;
+
     &.border {
       border: 1px solid rgb(5 5 5 / 6%);
       border-radius: 8px;
diff --git a/packages/theme/src/qr-code/vars.less b/packages/theme/src/qr-code/vars.less
deleted file mode 100644
index 65f6ef768a..0000000000
--- a/packages/theme/src/qr-code/vars.less
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
-* 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.
-*
-*/
-
-.component-css-vars-qr-code() {
-}
diff --git a/packages/theme/src/rate/index.less b/packages/theme/src/rate/index.less
index b54fad2fba..d1c461b8ec 100644
--- a/packages/theme/src/rate/index.less
+++ b/packages/theme/src/rate/index.less
@@ -16,7 +16,7 @@
 @rate-prefix-cls: ~'@{css-prefix}rate';
 
 .@{rate-prefix-cls} {
-  .component-css-vars-rate();
+  .inject-Rate-vars();
 
   display: inline-flex;
   outline: none;
@@ -29,7 +29,7 @@
   & &__star {
     position: relative;
     display: inline-block;
-    font-size: 0px;
+    font-size: 0;
     vertical-align: middle;
     text-align: center;
     line-height: 1;
@@ -48,23 +48,23 @@
     overflow: hidden;
     font-size: 16px;
     position: absolute;
-    top: 0px;
+    top: 0;
     left: 50%;
     transform: translateX(-50%);
   }
 
   & &__text {
     vertical-align: middle;
-    margin-left: var(--ti-rate-text-margin-left);
-    font-size: var(--ti-rate-text-font-size);
+    margin-left: var(--tv-Rate-text-margin-left);
+    font-size: var(--tv-Rate-text-font-size);
   }
 
   & &__bottom-text {
     position: relative;
-    font-size: var(--ti-rate-bottom-font-size);
+    font-size: var(--tv-Rate-bottom-font-size);
     text-align: center;
     text-overflow: clip;
     overflow: hidden;
-    margin-top: var(--ti-rate-bottom-margin-top);
+    margin-top: var(--tv-Rate-bottom-margin-top);
   }
 }
diff --git a/packages/theme/src/rate/vars.less b/packages/theme/src/rate/vars.less
index 91a661ed88..62100a14e6 100644
--- a/packages/theme/src/rate/vars.less
+++ b/packages/theme/src/rate/vars.less
@@ -10,13 +10,13 @@
 *
 */
 
-.component-css-vars-rate() {
+.inject-Rate-vars() {
   // 图标右侧文本左外边距
-  --ti-rate-text-margin-left: var(--ti-common-space-3x, 12px);
+  --tv-Rate-text-margin-left: var(--tv-space-lg);
   // 图标右侧文本字号
-  --ti-rate-text-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Rate-text-font-size: var(--tv-font-size-md);
   // 图标下方提示文本字号
-  --ti-rate-bottom-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Rate-bottom-font-size: var(--tv-font-size-md);
   // 图标下方提示文本上外边距
-  --ti-rate-bottom-margin-top: var(--ti-common-space-2x, 8px);
+  --tv-Rate-bottom-margin-top: var(--tv-space-md);
 }
diff --git a/packages/theme/src/skeleton-item/index.less b/packages/theme/src/skeleton-item/index.less
index e5be62f13d..093cfa0493 100644
--- a/packages/theme/src/skeleton-item/index.less
+++ b/packages/theme/src/skeleton-item/index.less
@@ -4,41 +4,41 @@
 @skeleton-item-prefix-cls: ~'@{css-prefix}skeleton-item';
 
 .@{skeleton-item-prefix-cls} {
-  .component-css-vars-skeleton-item();
+  .inject-SkeletonItem-vars();
 
   &--active {
     &.@{skeleton-item-prefix-cls} {
-      background: var(--ti-skeleton-item-linear-gradient);
+      background: var(--tv-SkeletonItem-linear-gradient);
       background-size: 200% 100%;
       background-position-x: 180%;
       animation: 1.5s skeleton-loading ease-in-out infinite;
     }
   }
 
-  background-color: var(--ti-skeleton-item-bg-color);
-  border-radius: var(--ti-skeleton-item-border-radius);
+  background-color: var(--tv-SkeletonItem-bg-color);
+  border-radius: var(--tv-SkeletonItem-border-radius);
 
   &--square {
     width: 100%;
-    height: var(--ti-skeleton-item-square-height);
+    height: var(--tv-SkeletonItem-square-height);
   }
 
   &--circle {
-    border-radius: var(--ti-skeleton-item-circle-border-radius);
+    border-radius: var(--tv-SkeletonItem-circle-border-radius);
     &.@{skeleton-item-prefix-cls} {
       &--small {
-        width: var(--ti-skeleton-item-circle-small-size);
-        height: var(--ti-skeleton-item-circle-small-size);
+        width: var(--tv-SkeletonItem-circle-small-size);
+        height: var(--tv-SkeletonItem-circle-small-size);
       }
 
       &--medium {
-        width: var(--ti-skeleton-item-circle-medium-size);
-        height: var(--ti-skeleton-item-circle-medium-size);
+        width: var(--tv-SkeletonItem-circle-medium-size);
+        height: var(--tv-SkeletonItem-circle-medium-size);
       }
 
       &--large {
-        width: var(--ti-skeleton-item-circle-large-size);
-        height: var(--ti-skeleton-item-circle-large-size);
+        width: var(--tv-SkeletonItem-circle-large-size);
+        height: var(--tv-SkeletonItem-circle-large-size);
       }
     }
   }
@@ -51,23 +51,23 @@
     svg {
       width: 40%;
       height: 40%;
-      fill: var(--ti-skeleton-item-image-icon-color);
+      fill: var(--tv-SkeletonItem-image-icon-color);
     }
 
     &.@{skeleton-item-prefix-cls} {
       &--small {
-        width: var(--ti-skeleton-item-image-small-size-width);
-        height: var(--ti-skeleton-item-image-small-size-height);
+        width: var(--tv-SkeletonItem-image-small-size-width);
+        height: var(--tv-SkeletonItem-image-small-size-height);
       }
 
       &--medium {
-        width: var(--ti-skeleton-item-image-medium-size-width);
-        height: var(--ti-skeleton-item-image-medium-size-height);
+        width: var(--tv-SkeletonItem-image-medium-size-width);
+        height: var(--tv-SkeletonItem-image-medium-size-height);
       }
 
       &--large {
-        width: var(--ti-skeleton-item-image-large-size-width);
-        height: var(--ti-skeleton-item-image-large-size-height);
+        width: var(--tv-SkeletonItem-image-large-size-width);
+        height: var(--tv-SkeletonItem-image-large-size-height);
       }
     }
   }
diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less
index 461e92e9eb..c2b236b49f 100644
--- a/packages/theme/src/skeleton-item/vars.less
+++ b/packages/theme/src/skeleton-item/vars.less
@@ -1,31 +1,32 @@
-.component-css-vars-skeleton-item() {
+.inject-SkeletonItem-vars() {
   // 骨架屏元素背景设置
-  --ti-skeleton-item-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
+  --tv-SkeletonItem-bg-color: var(--tv-color-bg);
   // 骨架屏元素半径设置
-  --ti-skeleton-item-border-radius: 2px;
+  --tv-SkeletonItem-border-radius: var(--tv-border-radius-sm);
   // 图片颜色设置
-  --ti-skeleton-item-image-icon-color: var(--ti-common-color-bg-normal, #f5f5f5);
+  --tv-SkeletonItem-image-icon-color: var(--tv-color-bg);
   // 方形高度设置
-  --ti-skeleton-item-square-height: var(--ti-common-size-7x, 28px);
+  --tv-SkeletonItem-square-height: var(--tv-size-height-sm);
   // 圆角半径设置
-  --ti-skeleton-item-circle-border-radius: 50%;
-  --ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px);
+  --tv-SkeletonItem-circle-border-radius: var(--tv-border-radius-round);
+  // 圆形中大尺寸
+  --tv-SkeletonItem-circle-large-size: 60px;
   // 圆形中尺寸设置
-  --ti-skeleton-item-circle-medium-size: var(--ti-common-size-12x, 48px);
+  --tv-SkeletonItem-circle-medium-size: 48px;
   // 圆形小尺寸设置
-  --ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px);
+  --tv-SkeletonItem-circle-small-size: 20px;
   // 小图片高度设置
-  --ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px);
+  --tv-SkeletonItem-image-small-size-height: 60px;
   // 小图片宽度设置
-  --ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px);
+  --tv-SkeletonItem-image-small-size-width: 60px;
   // 中图片高度设置
-  --ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px);
+  --tv-SkeletonItem-image-medium-size-height: 100px;
   // 中图片宽度设置
-  --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px);
+  --tv-SkeletonItem-image-medium-size-width: 100px;
   // 大图片高度设置
-  --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px);
+  --tv-SkeletonItem-image-large-size-height: 200px;
   // 大图片宽度设置
-  --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px);
+  --tv-SkeletonItem-image-large-size-width: 200px;
   // 渐变颜色设置(hide)
-  --ti-skeleton-item-linear-gradient: linear-gradient(to right, #fafafa, #ebebeb, #fafafa);
+  --tv-SkeletonItem-linear-gradient: linear-gradient(to right, #fafafa, #ebebeb, #fafafa);
 }
diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less
index c424743efe..b9976fe3e0 100644
--- a/packages/theme/src/skeleton/index.less
+++ b/packages/theme/src/skeleton/index.less
@@ -4,7 +4,7 @@
 @skeleton-item-prefix-cls: ~'@{css-prefix}skeleton';
 
 .@{skeleton-item-prefix-cls} {
-  .component-css-vars-skeleton();
+  .inject-Skeleton-vars();
 
   width: 100%;
 
@@ -17,9 +17,9 @@
     position: relative;
     overflow: hidden;
     flex-shrink: 0;
-    width: var(--ti-skeleton-avatar-size);
-    height: var(--ti-skeleton-avatar-size);
-    margin-right: var(--ti-skeleton-avatar-margin-right);
+    width: var(--tv-Skeleton-avatar-size);
+    height: var(--tv-Skeleton-avatar-size);
+    margin-right: 16px;
   }
 
   &__section {
@@ -27,20 +27,20 @@
   }
 
   &-item__title {
-    width: var(--ti-skeleton-title-width);
-    height: var(--ti-skeleton-title-height);
+    width: 240px;
+    height: 48px;
   }
 
   &-item__rows {
-    margin-top: var(--ti-skeleton-rows-margin-top);
-    margin-bottom: var(--ti-skeleton-rows-margin-bottom);
+    margin-top: 24px;
+    margin-bottom: 24px;
   }
 
   &-item--square {
-    margin-bottom: var(--ti-skeleton-row-margin-bottom);
+    margin-bottom: 12px;
 
     &:last-child {
-      width: var(--ti-skeleton-last-row-width);
+      width: 60%;
       margin-bottom: 0;
     }
   }
diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less
index f1c05e8ce3..7379fb81b2 100644
--- a/packages/theme/src/skeleton/vars.less
+++ b/packages/theme/src/skeleton/vars.less
@@ -1,12 +1,4 @@
-.component-css-vars-skeleton() {
-  --ti-skeleton-avatar-size: var(--ti-common-size-10x, 40px);
-  --ti-skeleton-avatar-background-color: var(--ti-common-color-bg-disabled, #f0f0f0);
-  --ti-skeleton-avatar-margin-right: var(--ti-common-space-4x, 16px);
-  --ti-skeleton-title-margin-bottom: var(--ti-common-space-4x, 16px);
-  --ti-skeleton-title-width: 240px;
-  --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px);
-  --ti-skeleton-last-row-width: 60%;
-  --ti-skeleton-title-height: 48px;
-  --ti-skeleton-rows-margin-top: var(--ti-common-space-6x, 24px);
-  --ti-skeleton-rows-margin-bottom: var(--ti-common-space-6x, 24px);
+.inject-Skeleton-vars() {
+  // 头像占位尺寸
+  --tv-Skeleton-avatar-size: 40px;
 }
diff --git a/packages/theme/src/text-popup/index.less b/packages/theme/src/text-popup/index.less
index 4b18f3f6e1..e1fdfc88b1 100644
--- a/packages/theme/src/text-popup/index.less
+++ b/packages/theme/src/text-popup/index.less
@@ -16,7 +16,7 @@
 @text-popup-prefix-cls: ~'@{css-prefix}text-popup';
 
 .@{text-popup-prefix-cls} {
-  .component-css-vars-text-popup();
+  .inject-TextPopup-vars();
 
   display: inline-block;
 
@@ -27,7 +27,7 @@
   .area {
     font-size: var(--ti-text-popup-font-size);
     font-family: var(--ti-text-popup-font-family);
-    padding: var(--ti-text-popup-padding-vertical) var(--ti-text-popup-padding-horizontal);
+    padding: 5px 12px;
     width: 100%;
     border-radius: var(--ti-text-popup-border-radius, 2px);
     outline: none;
diff --git a/packages/theme/src/text-popup/vars.less b/packages/theme/src/text-popup/vars.less
index ab31e794ef..49071f241c 100644
--- a/packages/theme/src/text-popup/vars.less
+++ b/packages/theme/src/text-popup/vars.less
@@ -10,25 +10,19 @@
 *
 */
 
-.component-css-vars-text-popup() {
+.inject-TextPopup-vars() {
   // 输入框圆角
-  --ti-text-popup-border-radius: var(--ti-common-border-radius-normal, 6px);
+  --tv-TextPopup-border-radius: var(--tv-border-radius-md);
   // 输入框高度
-  --ti-text-popup-height: 32px;
+  --tv-TextPopup-height: var(--tv-size-height-md);
   // 输入框字号
-  --ti-text-popup-font-size: var(--ti-common-font-size-1, 14px);
-  // 输入框字族
-  --ti-text-popup-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
+  --tv-TextPopup-font-size: var(--tv-font-size-md);
   // 输入框边框色
-  --ti-text-popup-border-color: var(--ti-common-color-line-normal, #c2c2c2);
+  --tv-TextPopup-border-color: var(--tv-color-border);
   // 输入框聚焦展开时阴影
-  --ti-text-popup-box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3);
+  --tv-TextPopup-box-shadow: var(--tv-shadow-1);
   // 输入框悬浮边框色
-  --ti-text-popup-hover-border-color: var(--ti-common-color-line-hover, #191919);
+  --tv-TextPopup-hover-border-color: var(--tv-color-border-hover);
   //输入框聚焦边框色
-  --ti-text-popup-focus-border-color: var(--ti-common-color-line-active, #191919);
-  // 输入框垂直内边距
-  --ti-text-popup-padding-vertical: 5px;
-  // 输入框水平内边距
-  --ti-text-popup-padding-horizontal: var(--ti-common-space-3x, 12px);
+  --tv-TextPopup-focus-border-color: var(--tv-color-border-active);
 }
diff --git a/packages/theme/src/watermark/index.less b/packages/theme/src/watermark/index.less
index 021397dac2..d1d4d63f27 100644
--- a/packages/theme/src/watermark/index.less
+++ b/packages/theme/src/watermark/index.less
@@ -10,13 +10,10 @@
 *
 */
 @import '../custom.less';
-@import './vars.less';
 
 @watermark-prefix-cls: ~'@{css-prefix}watermark';
 
 .@{watermark-prefix-cls} {
-  .component-css-vars-watermark();
-
   &-wrapper {
     position: relative;
   }
diff --git a/packages/theme/src/watermark/vars.less b/packages/theme/src/watermark/vars.less
deleted file mode 100644
index baef37004a..0000000000
--- a/packages/theme/src/watermark/vars.less
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
-* 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.
-*
-*/
-
-.component-css-vars-watermark() {
-}

From 32ba05f168ff8962ca13996284950ca614cb9890 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 30 Sep 2024 11:26:45 +0800
Subject: [PATCH 2/3] refactor(theme): [qr-code,text-popup,watemark,rate]
 refactor some components theme vars

---
 packages/theme/src/text-popup/index.less | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/theme/src/text-popup/index.less b/packages/theme/src/text-popup/index.less
index e1fdfc88b1..197892e148 100644
--- a/packages/theme/src/text-popup/index.less
+++ b/packages/theme/src/text-popup/index.less
@@ -25,28 +25,28 @@
   }
 
   .area {
-    font-size: var(--ti-text-popup-font-size);
-    font-family: var(--ti-text-popup-font-family);
+    font-size: var(--tv-TextPopup-font-size);
+    font-family: var(--tv-TextPopup-font-family);
     padding: 5px 12px;
     width: 100%;
-    border-radius: var(--ti-text-popup-border-radius, 2px);
+    border-radius: var(--tv-TextPopup-border-radius, 2px);
     outline: none;
     box-sizing: border-box;
   }
 
   .text {
-    border: 1px solid var(--ti-text-popup-border-color);
+    border: 1px solid var(--tv-TextPopup-border-color);
     line-height: 1;
-    height: var(--ti-text-popup-height);
+    height: var(--tv-TextPopup-height);
 
     &:hover {
-      border-color: var(--ti-text-popup-hover-border-color);
+      border-color: var(--tv-TextPopup-hover-border-color);
     }
   }
 
   .popup {
     resize: none;
-    box-shadow: var(--ti-text-popup-box-shadow);
-    border: 1px solid var(--ti-text-popup-focus-border-color);
+    box-shadow: var(--tv-TextPopup-box-shadow);
+    border: 1px solid var(--tv-TextPopup-focus-border-color);
   }
 }

From 05d794b9123dc885416db1df75e36cdd314098ee Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 30 Sep 2024 11:29:21 +0800
Subject: [PATCH 3/3] refactor(theme): [qr-code,text-popup,watemark,rate]
 refactor some components theme vars

---
 examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts b/examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts
index 15570b127f..c10d398d0c 100644
--- a/examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/text-popup/basic-usage.spec.ts
@@ -10,16 +10,16 @@ test('Textpopup 基本用法', async ({ page }) => {
 
   // 正常时只显示小输入框
   await expect(small).toBeVisible()
-  await expect(small).toHaveCSS('border-color', 'rgb(173, 176, 184)')
+  await expect(small).toHaveCSS('border-color', 'rgb(194, 194, 194)')
   await expect(larger).toHaveCSS('display', 'none')
   await small.hover()
-  await expect(small).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+  await expect(small).toHaveCSS('border-color', 'rgb(25, 25, 25)')
 
   // 点击输入框后，大输入框弹出，小输入框消失
   await small.click()
   await expect(larger).toBeVisible()
   await expect(small).toHaveCSS('display', 'none')
-  await expect(larger).toHaveCSS('border-color', 'rgb(94, 124, 224)')
+  await expect(larger).toHaveCSS('border-color', 'rgb(25, 25, 25)')
 
   // 点击非输入框区域，大输入框消失
   await preview.click()