diff --git a/packages/theme/src/button/snippet.js b/packages/theme/src/button/snippet.js
deleted file mode 100644
index 6179a7555d..0000000000
--- a/packages/theme/src/button/snippet.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const prefix = ['--tv-Button-', '按钮']
-const props = [
-  'text-color|文本色'
-  // 'bg-color|背景色',
-  // 'border-color|边框色',
-  //  'icon-color|图标色',
-
-  // 'text-color-active|激活的文本色',
-  // 'bg-color-active|激活的背景色',
-  // 'border-color-active|激活的边框色',
-  // 'icon-color-active|激活的图标色',
-
-  // 'text-color-plain-active|激活的朴素文本色',
-  // 'bg-colo-plain-activer|激活的朴素背景色',
-  // 'border-color-plain-active|激活的朴素边框色',
-
-  // 'height|高度',
-  // 'padding|内边距',
-  // 'margin|外边距',
-  // 'font-size|字号',
-  // 'font-weight|字重',
-  // 'box-shadow|阴影',
-  // 'border-radius|圆角',
-
-  // 'font-size|字号',
-  // 'height|高度',
-  // 'padding-x|水平间距',
-  // 'min-width|最小宽度',
-]
-
-const suffix = [
-  // '-default|默认时',
-
-  // '-primary|primary 主题时',
-  // '-success|success 主题时',
-  // '-info|info 主题时',
-  // '-warning|warning 主题时',
-  // '-danger|danger 主题时',
-
-  // '-disabled|禁用时',
-  '-ghost|幽灵时'
-  // '-plain|朴素时',
-  // '-active|激活时',
-  // '-large|超大',
-  // '-medium|中等',
-  // '-small|小型',
-  // '-mini|超小',
-]
-
-const res = suffix
-  .map((suf) => {
-    const sufx = suf.split('|')
-
-    return props.map((prop) => {
-      const names = prop.split('|')
-      return '// ' + sufx[1] + prefix[1] + names[1] + '\n' + prefix[0] + names[0] + sufx[0] + ': var(--xxxxx);\n'
-    })
-  })
-  .flat()
-  .join('')
-
-/* eslint-disable no-console */
-console.log(res)
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index edea9fe5d5..bdbea2b0b5 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -79,7 +79,7 @@
   // 默认时按钮边框色
   --tv-Button-border-color-default: var(--tv-color-border-secondary);
   // 默认时按钮图标色
-  --tv-Button-icon-color-default: var(--tv-color-icon-stable);
+  --tv-Button-icon-color-default: var(--tv-color-icon-control);
 
   // primary 主题时按钮文本色
   --tv-Button-text-color-primary: var(--tv-color-act-primary-text-white);
diff --git a/packages/theme/src/card-group/index.less b/packages/theme/src/card-group/index.less
index ac3ba060a9..7e12df99de 100644
--- a/packages/theme/src/card-group/index.less
+++ b/packages/theme/src/card-group/index.less
@@ -11,13 +11,10 @@
 */
 
 @import '../custom.less';
-@import './vars.less';
 
 @card-group-prefix-cls: ~'@{css-prefix}card-group';
 
 .@{card-group-prefix-cls} {
-  .component-css-vars-amount();
-
   width: 100%;
   display: grid;
   grid-row-gap: 16px;
diff --git a/packages/theme/src/card-group/vars.less b/packages/theme/src/card-group/vars.less
deleted file mode 100644
index 3bd7c45b24..0000000000
--- a/packages/theme/src/card-group/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-amount() {
-}
diff --git a/packages/theme/src/card-item/index.less b/packages/theme/src/card-item/index.less
deleted file mode 100644
index 25db8ed769..0000000000
--- a/packages/theme/src/card-item/index.less
+++ /dev/null
@@ -1,159 +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.
-*
-*/
-
-@import '../custom.less';
-@import './vars.less';
-
-@card-item-prefix-cls: ~'@{css-prefix}card-item';
-
-.@{card-item-prefix-cls} {
-  .component-css-vars-card-item();
-
-  transition: all 200ms ease;
-  transition-property: left, top, right, transform;
-  background: var(--ti-card-item-bg-color);
-  box-shadow: 0 0 0 transparent;
-  border: 1px solid var(--ti-card-item-border-color);
-  border-radius: 0;
-  right: auto;
-  overflow: hidden;
-  margin: 6px;
-
-  &.resizing {
-    opacity: 0.6;
-    z-index: 3;
-  }
-
-  &.dragging {
-    user-select: none;
-    transition: none;
-    z-index: 3;
-  }
-
-  &.placeholder {
-    background: var(--ti-card-item-placeholder-bg-color);
-    border: 1px dashed var(--ti-card-item-placeholder-border-color);
-    transition-duration: 100ms;
-    z-index: 2;
-    user-select: none;
-
-    & .resizableIcon,
-    .remove {
-      display: none;
-    }
-  }
-
-  & > .resizableIcon {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    bottom: 2px;
-    right: 2px;
-    box-sizing: border-box;
-    cursor: se-resize;
-
-    &:before {
-      position: absolute;
-      content: '';
-      width: 6px;
-      height: 6px;
-      bottom: 2px;
-      right: 2px;
-      border-right: 1px solid var(--ti-card-item-resize-icon-color);
-      border-bottom: 1px solid var(--ti-card-item-resize-icon-color);
-      box-sizing: border-box;
-    }
-  }
-
-  & .remove {
-    position: absolute;
-    width: 22px;
-    height: 22px;
-    top: 0;
-    right: 0;
-    padding: 0 3px 3px 0;
-    box-sizing: border-box;
-    cursor: pointer;
-    opacity: 0.5;
-    background: var(--ti-card-item-remove-icon-bg-color);
-    transition: all 0.5s;
-
-    &:hover {
-      background: var(--ti-card-item-remove-icon-hover-bg-color);
-
-      &:before,
-      &:after {
-        background: var(--ti-card-item-remove-icon-hover-text-color);
-      }
-    }
-  }
-
-  &:hover .remove {
-    opacity: 1;
-  }
-
-  & .remove:before {
-    position: absolute;
-    top: 10px;
-    right: 6px;
-    content: '';
-    background: var(--ti-card-item-remove-icon-color, rgba(0, 0, 0, 0.5));
-    height: 1px;
-    width: 10px;
-    transform: rotate(45deg);
-    transition: background 0.5s;
-  }
-
-  & .remove:after {
-    position: absolute;
-    top: 10px;
-    left: 6px;
-    content: '';
-    background: var(--ti-card-item-remove-icon-color, rgba(0, 0, 0, 0.5));
-    height: 1px;
-    width: 10px;
-    transform: rotate(-45deg);
-    transition: background 0.5s;
-  }
-
-  .card-header {
-    font-size: var(--ti-card-item-header-font-size);
-    color: var(--ti-card-item-header-text-color);
-    height: var(--ti-card-item-header-height);
-    line-height: var(--ti-card-item-header-height);
-    width: 100%;
-    padding: 0 30px 0 0;
-    box-sizing: border-box;
-
-    & > .card-title {
-      height: 13px;
-      line-height: 13px;
-      border-left: 3px solid var(--ti-card-item-header-title-border-color);
-      margin: 0 0 0 12px;
-      padding: 0 0 0 5px;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-    }
-  }
-
-  .card-body {
-    height: calc(100% - var(--ti-card-item-header-height));
-    position: relative;
-
-    &:nth-child(1) {
-      height: 100%;
-    }
-  }
-}
diff --git a/packages/theme/src/card-item/vars.less b/packages/theme/src/card-item/vars.less
deleted file mode 100644
index 6fa8e93e05..0000000000
--- a/packages/theme/src/card-item/vars.less
+++ /dev/null
@@ -1,27 +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-card-item() {
-  --ti-card-item-bg-color: var(--ti-common-color-light, #ffffff);
-  --ti-card-item-border-color: #ccc;
-  --ti-card-item-placeholder-bg-color: rgba(0, 0, 0, 0.05);
-  --ti-card-item-placeholder-border-color: rgba(0, 0, 0, 0.2);
-  --ti-card-item-resize-icon-color: rgba(0, 0, 0, 0.5);
-  --ti-card-item-remove-icon-bg-color: rgba(255, 255, 255, 0);
-  --ti-card-item-remove-icon-color: rgba(0, 0, 0, 0.5);
-  --ti-card-item-remove-icon-hover-bg-color: rgba(255, 255, 255, 0.8);
-  --ti-card-item-remove-icon-hover-text-color: rgba(0, 0, 0, 0.7);
-  --ti-card-item-header-font-size: var(--ti-common-font-size-1, 14px);
-  --ti-card-item-header-text-color: #444;
-  --ti-card-item-header-height: var(--ti-common-size-10x, 40px);
-  --ti-card-item-header-title-border-color: var(--ti-common-color-bg-dark-deep, #fff);
-}
diff --git a/packages/theme/src/card-layout/index.less b/packages/theme/src/card-layout/index.less
deleted file mode 100644
index cb963165da..0000000000
--- a/packages/theme/src/card-layout/index.less
+++ /dev/null
@@ -1,49 +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.
-*
-*/
-
-@import '../custom.less';
-@import './vars.less';
-
-@cards-prefix-cls: ~'@{css-prefix}cards';
-
-.@{cards-prefix-cls} {
-  .component-css-vars-card-layout();
-
-  border-radius: 0;
-  background-color: var(--ti-card-bg-color);
-  overflow: hidden;
-  position: relative;
-  box-shadow: none;
-  border: 0;
-
-  & &_body {
-    padding: 12px 24px 24px;
-  }
-
-  &.card-layout {
-    border: none;
-    border-radius: 0;
-    overflow: hidden;
-    box-shadow: none;
-    position: relative;
-    transition: height 0.2s ease;
-
-    .@{cards-prefix-cls}_body {
-      padding: 0;
-    }
-
-    &.drop-active {
-      border: 1px solid var(--ti-card-drop-border-color);
-      background-color: var(--ti-card-bg-color);
-    }
-  }
-}
diff --git a/packages/theme/src/card-layout/vars.less b/packages/theme/src/card-layout/vars.less
deleted file mode 100644
index 8497c1fb6e..0000000000
--- a/packages/theme/src/card-layout/vars.less
+++ /dev/null
@@ -1,16 +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-card-layout() {
-  --ti-card-bg-color: var(--ti-common-color-light, #ffffff);
-  --ti-card-drop-border-color: var(--ti-base-color-brand-6, #191919);
-}
diff --git a/packages/theme/src/card-template/index.less b/packages/theme/src/card-template/index.less
index d1379129b4..0947e6eb67 100644
--- a/packages/theme/src/card-template/index.less
+++ b/packages/theme/src/card-template/index.less
@@ -20,7 +20,7 @@
   .component-css-vars-card-template();
 
   border-radius: 0;
-  background-color: var(--ti-card-bg-color);
+  background-color: var(--tv-CardTemplate-bg-color);
   overflow: hidden;
   position: relative;
   box-shadow: none;
@@ -28,19 +28,19 @@
 
   & &__header {
     padding: 0 24px;
-    height: var(--ti-card-header-height);
-    line-height: var(--ti-card-header-height);
+    height: var(--tv-CardTemplate-header-height);
+    line-height: var(--tv-CardTemplate-header-height);
 
     &.is-line {
-      border-bottom: 1px solid var(--ti-card-header-border-color);
+      border-bottom: 1px solid var(--tv-CardTemplate-header-border-color);
     }
   }
 
   & &__title {
-    font-weight: var(--ti-card-header-title-font-weight);
-    font-size: var(--ti-card-header-title-font-size);
+    font-weight: var(--tv-CardTemplate-header-title-font-weight);
+    font-size: var(--tv-CardTemplate-header-title-font-size);
     color: #333;
-    color: var(--ti-card-header-title-text-color);
+    color: var(--tv-CardTemplate-header-title-text-color);
     float: left;
   }
 
@@ -48,7 +48,7 @@
     .clearfix();
 
     .@{css-prefix-iconfont} {
-      font-size: var(--ti-card-tool-icon-size);
+      font-size: var(--tv-CardTemplate-tool-icon-size);
       cursor: pointer;
     }
   }
@@ -58,26 +58,26 @@
     float: right;
 
     > li {
-      height: var(--ti-card-header-height);
-      line-height: var(--ti-card-header-height);
+      height: var(--tv-CardTemplate-header-height);
+      line-height: var(--tv-CardTemplate-header-height);
       float: left;
       font-size: var(--ti-common-font-size-2);
       margin: 0 12px 0 0;
 
       svg {
-        fill: var(--ti-card-tool-icon-color);
+        fill: var(--tv-CardTemplate-tool-icon-color);
         cursor: pointer;
       }
 
       .@{css-prefix-iconfont} {
-        color: var(--ti-card-tool-icon-color);
+        color: var(--tv-CardTemplate-tool-icon-color);
 
         &:hover {
-          color: var(--ti-card-tool-hover-icon-color);
+          color: var(--tv-CardTemplate-tool-hover-icon-color);
         }
 
         &:active {
-          color: var(--ti-card-tool-active-icon-color);
+          color: var(--tv-CardTemplate-tool-active-icon-color);
         }
       }
 
@@ -89,14 +89,14 @@
 
   & &__more {
     position: absolute;
-    top: calc(var(--ti-card-header-height, 45px) - 1 * 1px);
+    top: calc(var(--tv-CardTemplate-header-height, 45px) - 1 * 1px);
     right: 5px;
-    border: 1px solid var(--ti-card-header-border-color);
+    border: 1px solid var(--tv-CardTemplate-header-border-color);
     border-radius: 2px;
     box-shadow: var(--ti-common-shadow-2-down);
-    background: var(--ti-card-bg-color);
+    background: var(--tv-CardTemplate-bg-color);
     color: #333;
-    color: var(--ti-card-tool-selector-text-color);
+    color: var(--tv-CardTemplate-tool-selector-text-color);
     margin-top: 2px;
 
     &:before {
@@ -116,15 +116,15 @@
 
     > ul {
       > li {
-        height: var(--ti-card-tool-selector-height);
-        line-height: var(--ti-card-tool-selector-height);
+        height: var(--tv-CardTemplate-tool-selector-height);
+        line-height: var(--tv-CardTemplate-tool-selector-height);
         padding: 0 18px;
-        color: var(--ti-card-tool-selector-text-color);
+        color: var(--tv-CardTemplate-tool-selector-text-color);
         display: flex;
         align-items: center;
 
         .@{css-prefix-iconfont} {
-          color: var(--ti-card-tool-icon-color);
+          color: var(--tv-CardTemplate-tool-icon-color);
           margin-right: 10px;
         }
 
@@ -134,20 +134,20 @@
 
         &:hover {
           cursor: pointer;
-          color: var(--ti-card-tool-selector-hover-text-color);
-          background: var(--ti-card-tool-selector-hover-bg-color);
+          color: var(--tv-CardTemplate-tool-selector-hover-text-color);
+          background: var(--tv-CardTemplate-tool-selector-hover-bg-color);
 
           .@{css-prefix-iconfont} {
-            color: var(--ti-card-tool-hover-icon-color);
+            color: var(--tv-CardTemplate-tool-hover-icon-color);
           }
         }
 
         &:active {
-          color: var(--ti-card-tool-selector-active-text-color);
-          background: var(--ti-card-tool-selector-active-bg-color);
+          color: var(--tv-CardTemplate-tool-selector-active-text-color);
+          background: var(--tv-CardTemplate-tool-selector-active-bg-color);
 
           .@{css-prefix-iconfont} {
-            color: var(--ti-card-tool-active-icon-color);
+            color: var(--tv-CardTemplate-tool-active-icon-color);
           }
         }
       }
diff --git a/packages/theme/src/card-template/vars.less b/packages/theme/src/card-template/vars.less
index b980805760..1f10decb1c 100644
--- a/packages/theme/src/card-template/vars.less
+++ b/packages/theme/src/card-template/vars.less
@@ -10,21 +10,21 @@
 *
 */
 
-.component-css-vars-card-template() {
-  --ti-card-bg-color: var(--ti-common-color-light, #ffffff);
-  --ti-card-tool-icon-size: 16px;
-  --ti-card-tool-icon-color: var(--ti-base-color-brand-6, #191919);
-  --ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5, #c2c2c2);
-  --ti-card-tool-active-icon-color: var(--ti-common-color-primary-active, #595959);
-  --ti-card-tool-selector-height: var(--ti-common-size-10x, 40px);
-  --ti-card-tool-selector-text-color: var(--ti-common-color-info-normal, #191919);
-  --ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6, #191919);
-  --ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
-  --ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active, #595959);
-  --ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
-  --ti-card-header-height: 46px;
-  --ti-card-header-border-color: var(--ti-common-color-border, #999999);
-  --ti-card-header-title-font-weight: var(--ti-common-font-weight-7, bold);
-  --ti-card-header-title-font-size: var(--ti-common-font-size-1, 14px);
-  --ti-card-header-title-text-color: var(--ti-common-color-info-normal, #191919);
+.inject-CardTemplate-vars() {
+  --tv-CardTemplate-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tv-CardTemplate-tool-icon-size: var(--tv-icon-size);
+  --tv-CardTemplate-tool-icon-color: var(--tv-color-icon-control, #191919);
+  --tv-CardTemplate-tool-hover-icon-color: #c2c2c2; // 无对应的正确变量
+  --tv-CardTemplate-tool-active-icon-color: #595959;
+  --tv-CardTemplate-tool-selector-height: 40px;
+  --tv-CardTemplate-tool-selector-text-color: var(--tv-color-text, #191919);
+  --tv-CardTemplate-tool-selector-hover-text-color: var(--tv-color-text, #191919);
+  --tv-CardTemplate-tool-selector-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
+  --tv-CardTemplate-tool-selector-active-text-color: var(--tv-color-text-secondary, #595959);
+  --tv-CardTemplate-tool-selector-active-bg-color: var(--tv-color-bg-hover, #f5f5f5);
+  --tv-CardTemplate-header-height: 46px;
+  --tv-CardTemplate-header-border-color: #999999;
+  --tv-CardTemplate-header-title-font-weight: var(--tv-font-weight-bold, bold);
+  --tv-CardTemplate-header-title-font-size: var(--tv-font-size-md, 14px);
+  --tv-CardTemplate-header-title-text-color: var(--tv-color-text, #191919);
 }
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index 048639c4cd..0f9df2401b 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -29,8 +29,6 @@
 @import './card/index.less';
 @import './card-container/index.less';
 @import './card-group/index.less';
-@import './card-item/index.less';
-@import './card-layout/index.less';
 @import './card-template/index.less';
 @import './carousel/index.less';
 @import './carousel-item/index.less';
@@ -169,4 +167,4 @@
 @import './user-link/index.less';
 @import './watermark/index.less';
 @import './wizard/index.less';
-@import './year-table/index.less';
\ No newline at end of file
+@import './year-table/index.less';