diff --git a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts
index 821dbfc55c..86b7d1fa11 100644
--- a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts
+++ b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts
@@ -10,8 +10,8 @@ test('动态加载且父子级不相关联 lazyload & checkStrictly', async ({ p
   const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('svg')
   await expect(loadingSvg).toHaveClass(/tiny-cascader-node__postfix/)
   await page.waitForTimeout(100)
-  await page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').click()
+  await page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').nth(0).click()
   await page.getByRole('textbox', { name: '请选择' }).click()
-  const light = page.getByRole('menuitem', { name: '选项2' }).getByRole('radio')
+  const light = page.getByRole('menuitem', { name: '选项2' }).getByRole('radio').nth(0)
   await expect(light).toHaveClass('tiny-radio is-checked')
 })
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly.spec.ts b/examples/sites/demos/pc/app/cascader/check-strictly.spec.ts
index 121cdf8bcf..ea902d4a9c 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly.spec.ts
+++ b/examples/sites/demos/pc/app/cascader/check-strictly.spec.ts
@@ -4,8 +4,8 @@ test('父子级不相关联', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#check-strictly')
   await page.getByRole('textbox', { name: '请选择' }).click()
-  await page.getByRole('menuitem', { name: '开发' }).getByRole('radio').click()
+  await page.getByRole('menuitem', { name: '开发' }).getByRole('radio').nth(0).click()
   await page.getByRole('textbox', { name: '请选择' }).click()
-  const light = page.getByRole('menuitem', { name: '开发' }).getByRole('radio')
+  const light = page.getByRole('menuitem', { name: '开发' }).getByRole('radio').nth(0)
   await expect(light).toHaveClass('tiny-radio is-checked')
 })
diff --git a/packages/theme/src/cascader-menu/index.less b/packages/theme/src/cascader-menu/index.less
index 715a59e62f..01c8677cc7 100644
--- a/packages/theme/src/cascader-menu/index.less
+++ b/packages/theme/src/cascader-menu/index.less
@@ -17,12 +17,12 @@
 @cascader-node-prefix-cls: ~'@{css-prefix}cascader-node';
 
 .@{cascader-menu-prefix-cls} {
-  .component-css-vars-cascader-menu();
+  .inject-CascaderMenu-vars();
 
-  min-width: var(--ti-cascader-menu-width);
+  min-width: var(--tv-CascaderMenu-width);
   box-sizing: border-box;
-  color: var(--ti-cascader-menu-text-color);
-  border-right: solid 1px var(--ti-cascader-menu-border-color);
+  color: var(--tv-CascaderMenu-text-color);
+  border-right: solid 1px var(--tv-CascaderMenu-border-color);
 
   &:last-child {
     border-right: none;
@@ -39,10 +39,10 @@
   & &__list {
     position: relative;
     min-height: 100%;
-    margin: var(--ti-cascader-menu-list-margin-vertical) var(--ti-cascader-menu-list-margin-horizontal);
+    margin: var(--tv-CascaderMenu-list-margin-vertical) var(--tv-CascaderMenu-list-margin-horizontal);
     list-style: none;
     box-sizing: border-box;
-    padding: var(--ti-cascader-menu-list-padding-vertical) var(--ti-cascader-menu-list-padding-horizontal);
+    padding: var(--tv-CascaderMenu-list-padding-y) var(--tv-CascaderMenu-list-padding-x);
   }
 
   &__hover-zone {
@@ -60,7 +60,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    color: var(--ti-cascader-menu-empty-text-color);
+    color: var(--tv-CascaderMenu-empty-text-color);
   }
 
   &__no-data {
@@ -69,6 +69,6 @@
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    color: var(--ti-cascader-menu-empty-text-color);
+    color: var(--tv-CascaderMenu-empty-text-color);
   }
 }
diff --git a/packages/theme/src/cascader-menu/vars.less b/packages/theme/src/cascader-menu/vars.less
index 9095ddb470..8020afac5c 100644
--- a/packages/theme/src/cascader-menu/vars.less
+++ b/packages/theme/src/cascader-menu/vars.less
@@ -10,17 +10,17 @@
 *
 */
 
-.component-css-vars-cascader-menu() {
+.inject-CascaderMenu-vars() {
   // 下拉菜单文本色
-  --ti-cascader-menu-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-CascaderMenu-text-color: var(--tv-color-text, #191919);
   // 下拉菜单边框色
-  --ti-cascader-menu-border-color: #f5f5f5;
+  --tv-CascaderMenu-border-color: #f5f5f5; // 无对应变量
   // 下拉菜单为空时的文本色
-  --ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #808080);
+  --tv-CascaderMenu-empty-text-color: var(--tv-color-text-weaken, #808080);
   // 下拉菜单列表垂直方向的内边距
-  --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-2x, 8px);
+  --tv-CascaderMenu-list-padding-y: var(--tv-space-md, 8px);
   // 下拉菜单列表水平方向的内边距
-  --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
+  --tv-CascaderMenu-list-padding-x: 0;
   // 下拉菜单的宽度
-  --ti-cascader-menu-width: 159px;
+  --tv-CascaderMenu-width: 159px;
 }
diff --git a/packages/theme/src/cascader-node/index.less b/packages/theme/src/cascader-node/index.less
index 4ce07895e5..7b47bfd078 100644
--- a/packages/theme/src/cascader-node/index.less
+++ b/packages/theme/src/cascader-node/index.less
@@ -18,30 +18,30 @@
 @checkbox-prefix-cls: ~'@{css-prefix}checkbox';
 
 .@{cascader-node-prefix-cls} {
-  .component-css-vars-cascader-node();
+  .inject-CascaderNode-vars();
 
   &.is-selectable.in-active-path {
-    color: var(--ti-cascader-node-text-color);
+    color: var(--tv-CascaderNode-text-color);
   }
 
   &.in-active-path,
   &.is-active {
-    background: var(--ti-cascader-node-selectable-active-bg-color);
-    color: var(--ti-cascader-node-selectable-text-color);
+    background: var(--tv-CascaderNode-selectable-active-bg-color);
+    color: var(--tv-CascaderNode-selectable-text-color);
     &:hover {
-      background: var(--ti-cascader-node-selectable-hover-bg-color);
+      background: var(--tv-CascaderNode-selectable-hover-bg-color);
     }
   }
 
   &.in-active-path:hover {
-    background: var(--ti-cascader-node-selectable-hover-bg-color);
+    background: var(--tv-CascaderNode-selectable-hover-bg-color);
   }
 
   &:not(.is-disabled):not(.in-active-path):not(.is-active) {
     &:focus,
     &:hover {
-      background: var(--ti-cascader-node-hover-bg-color);
-      color: var(--ti-cascader-node-hover-text-color);
+      background: var(--tv-CascaderNode-hover-bg-color);
+      color: var(--tv-CascaderNode-hover-text-color);
     }
   }
 
@@ -50,29 +50,29 @@
   }
 
   &.is-disabled {
-    color: var(--ti-cascader-node-disabled-text-color);
-    fill: var(--ti-cascader-node-disabled-text-color);
-    background-color: var(--ti-cascader-node-disabled-bg-color);
+    color: var(--tv-CascaderNode-disabled-text-color);
+    fill: var(--tv-CascaderNode-disabled-text-color);
+    background-color: var(--tv-CascaderNode-disabled-bg-color);
     cursor: not-allowed;
     .@{cascader-node-prefix-cls}__prefix,
     .@{cascader-node-prefix-cls}__postfix {
-      fill: var(--ti-cascader-node-disabled-icon-color);
+      fill: var(--tv-CascaderNode-disabled-icon-color);
     }
   }
 
   &__prefix,
   &__postfix {
-    font-size: var(--ti-cascader-node-icon-font-size);
-    fill: var(--ti-cascader-node-icon-color);
+    font-size: var(--tv-CascaderNode-icon-font-size);
+    fill: var(--tv-CascaderNode-icon-color);
   }
 
   &.in-active-path,
   &.is-active {
     .@{cascader-node-prefix-cls}__postfix {
-      fill: var(--ti-cascader-node-active-icon-color);
+      fill: var(--tv-CascaderNode-active-icon-color);
     }
     .@{cascader-node-prefix-cls}__label {
-      font-weight: var(--ti-cascader-node-active-font-weight);
+      font-weight: var(--tv-CascaderNode-active-font-weight);
     }
   }
 
@@ -81,21 +81,21 @@
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
-    display: var(--ti-cascader-node-prefix-display) !important;
+    display: var(--tv-CascaderNode-prefix-display) !important;
   }
 
   &__postfix {
     position: absolute;
     top: 50%;
-    right: var(--ti-cascader-node-postfix-right);
+    right: var(--tv-CascaderNode-postfix-right);
     transform: translateY(-50%);
   }
 
   &__label {
-    max-width: var(--ti-cascader-node-label-max-width);
+    max-width: var(--tv-CascaderNode-label-max-width);
     flex: 1;
     flex-basis: auto\9;
-    padding: var(--ti-cascader-node-label-padding-vertical) var(--ti-cascader-node-label-padding-horizontal);
+    padding: var(--tv-CascaderNode-label-padding-y) var(--tv-CascaderNode-label-padding-x);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -107,13 +107,13 @@
   }
 
   & > .@{radio-prefix-cls} {
-    margin-right: var(--ti-cascader-node-radio-margin-right);
+    margin-right: var(--tv-CascaderNode-radio-margin-right);
     .@{radio-prefix-cls}__label {
       padding-left: 0;
     }
   }
 
   & > .@{checkbox-prefix-cls} {
-    margin-right: var(--ti-cascader-node-radio-margin-right);
+    margin-right: var(--tv-CascaderNode-radio-margin-right);
   }
 }
diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
index d32cfb3373..22fabf663f 100644
--- a/packages/theme/src/cascader-node/vars.less
+++ b/packages/theme/src/cascader-node/vars.less
@@ -10,43 +10,43 @@
 *
 */
 
-.component-css-vars-cascader-node() {
+.inject-CascaderNode-vars() {
   // 下拉列表子项的背景色
-  --ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f0f0f0);
+  --tv-CascaderNode-hover-bg-color: var(--tv-color-bg-secondary, #f0f0f0);
   // 下拉列表子项悬浮时的文本色
-  --ti-cascader-node-hover-text-color: var(--ti-common-color-primary-normal, #191919);
+  --tv-CascaderNode-hover-text-color: var(--tv-color-text, #191919);
   // 下拉列表子项的文本色
-  --ti-cascader-node-text-color: var(--ti-common-color-primary-normal, #191919);
+  --tv-CascaderNode-text-color: var(--tv-color-text, #191919);
   // 下拉列表子项选中后悬浮时的背景色
-  --ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
+  --tv-CascaderNode-selectable-hover-bg-color: var(--tv-color-bg, #f5f5f5);
   // 下拉列表子项选中时的文本色
-  --ti-cascader-node-selectable-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-CascaderNode-selectable-text-color: var(--tv-color-text, #191919);
   // 下拉列表子项禁用状态时的文本色
-  --ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-CascaderNode-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // 下拉列表子项禁用状态时的背景色
-  --ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
+  --tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
   // 下拉列表子项的icon图标的字体大小
-  --ti-cascader-node-icon-font-size: var(--ti-common-font-size-0, 12px);
+  --tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
   // 下拉列表子项的icon图标的色
-  --ti-cascader-node-icon-color: var(--ti-common-color-icon-normal, #808080);
+  --tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
   // 下拉列表子项禁用时的icon图标的色
-  --ti-cascader-node-disabled-icon-color: var(--ti-common-color-text-link-darkbg-hover, #c2c2c2);
+  --tv-CascaderNode-disabled-icon-color: var(--tv-color-icon-disabled, #c2c2c2);
   // 下拉列表子项的选中时icon图标的色
-  --ti-cascader-node-active-icon-color: var(--ti-common-color-primary-normal, #191919);
+  --tv-CascaderNode-active-icon-color: var(--tv-color-icon-hover, #191919);
   // 下拉列表子项的前缀display
-  --ti-cascader-node-prefix-display: none;
+  --tv-CascaderNode-prefix-display: none;
   // 下拉列表子项的标签的垂直方向的内边距
-  --ti-cascader-node-label-padding-vertical: var(--ti-common-space-0, 0px);
+  --tv-CascaderNode-label-padding-y: 0;
   // 下拉列表子项的标签的水平方向的内边距
-  --ti-cascader-node-label-padding-horizontal: var(--ti-common-space-0, 0px);
+  --tv-CascaderNode-label-padding-x: 0;
   // 下拉列表子项的单选按钮右侧外边距
-  --ti-cascader-node-radio-margin-right: var(--ti-common-space-base, 4px);
+  --tv-CascaderNode-radio-margin-right: var(--tv-space-sm, 4px);
   // 下拉列表子项聚焦时的背景色
-  --ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-bg-navigation, #ffffff);
+  --tv-CascaderNode-selectable-active-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 下拉列表子项icon距离右侧距离
-  --ti-cascader-node-postfix-right: var(--ti-common-space-4x, 16px);
+  --tv-CascaderNode-postfix-right: var(--tv-space-xl, 16px);
   // 下拉列表子项最大宽度
-  --ti-cascader-node-label-max-width: calc(var(--ti-common-space-2, 2px) * 53 + 1px);
+  --tv-CascaderNode-label-max-width: 107px;
   // 下拉列表子项高亮时字重
-  --ti-cascader-node-active-font-weight: var(--ti-common-font-weight-normal, 400);
+  --tv-CascaderNode-active-font-weight: var(--tv-font-weight-regular, 400);
 }
diff --git a/packages/theme/src/cascader-panel/index.less b/packages/theme/src/cascader-panel/index.less
index 1c306e56b8..4edaf04749 100644
--- a/packages/theme/src/cascader-panel/index.less
+++ b/packages/theme/src/cascader-panel/index.less
@@ -17,26 +17,26 @@
 @cascader-node-prefix-cls: ~'@{css-prefix}cascader-node';
 
 .@{cascader-panel-prefix-cls} {
-  .component-css-vars-cascader-panel();
+  .inject-CascaderPanel-vars();
 
   display: flex;
-  border-radius: var(--ti-cascader-panel-border-radius);
-  font-size: var(--ti-cascader-panel-font-size);
+  border-radius: var(--tv-CascaderPanel-border-radius);
+  font-size: var(--tv-CascaderPanel-font-size);
   &.is-bordered {
-    border: 1px solid var(--ti-cascader-panel-border-color);
-    border-radius: var(--ti-cascader-panel-border-radius);
+    border: 1px solid var(--tv-CascaderPanel-border-color);
+    border-radius: var(--tv-CascaderPanel-border-radius);
   }
 
   .@{cascader-node-prefix-cls} {
     position: relative;
     display: flex;
     align-items: center;
-    padding: var(--ti-cascader-panel-node-label-padding-vertical) var(--ti-cascader-panel-node-label-padding-right)
-      var(--ti-cascader-panel-node-label-padding-vertical) var(--ti-cascader-panel-node-label-padding-left);
-    height: var(--ti-cascader-panel-node-height);
-    line-height: var(--ti-cascader-panel-node-height);
+    padding: var(--tv-CascaderPanel-node-label-padding-x) var(--tv-CascaderPanel-node-label-padding-right)
+      var(--tv-CascaderPanel-node-label-padding-x) var(--tv-CascaderPanel-node-label-padding-left);
+    height: var(--tv-CascaderPanel-node-height);
+    line-height: var(--tv-CascaderPanel-node-height);
     outline: 0;
-    border-radius: var(--ti-cascader-panel-node-border-radius);
-    margin-top: var(--ti-cascader-panel-node-margin-top);
+    border-radius: var(--tv-CascaderPanel-node-border-radius);
+    margin-top: var(--tv-CascaderPanel-node-margin-top);
   }
 }
diff --git a/packages/theme/src/cascader-panel/vars.less b/packages/theme/src/cascader-panel/vars.less
index 9f04673666..317b65e29f 100644
--- a/packages/theme/src/cascader-panel/vars.less
+++ b/packages/theme/src/cascader-panel/vars.less
@@ -10,23 +10,23 @@
 *
 */
 
-.component-css-vars-cascader-panel() {
+.inject-CascaderPanel-vars() {
   // 下拉菜单面板的边框圆角
-  --ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal, 6px);
+  --tv-CascaderPanel-border-radius: var(--tv-border-radius-md, 6px);
   // 下拉菜单面板的边框色
-  --ti-cascader-panel-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
+  --tv-CascaderPanel-border-color: var(--tv-color-border-disabled, #dbdbdb);
   // 下拉菜单面板的字体大小
-  --ti-cascader-panel-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-CascaderPanel-font-size: var(--tv-font-size-md, 14px);
   // 下拉菜单面板子项的高度
-  --ti-cascader-panel-node-height: var(--ti-common-size-height-normal, 32px);
+  --tv-CascaderPanel-node-height: 32px;
   // 下拉菜单面板中子项的顶部外边距
-  --ti-cascader-panel-node-margin-top: var(--ti-common-space-0, 0px);
+  --tv-CascaderPanel-node-margin-top: 0;
   // 下拉菜单面板中子项的垂直方向的外边距
-  --ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0, 0px);
+  --tv-CascaderPanel-node-label-padding-x: 0;
   // 下拉菜单面板中子项的标签的右侧内边距
-  --ti-cascader-panel-node-label-padding-right: 16px;
+  --tv-CascaderPanel-node-label-padding-right: var(----tv-space-xl, 16px);
   // 下拉菜单面板中子项的标签的左侧内边距
-  --ti-cascader-panel-node-label-padding-left: 16px;
+  --tv-CascaderPanel-node-label-padding-left: var(----tv-space-xl, 16px);
   // 下拉菜单面板中子项的边框圆角
-  --ti-cascader-panel-node-border-radius: 0px;
+  --tv-CascaderPanel-node-border-radius: 0;
 }
diff --git a/packages/theme/src/cascader/index.less b/packages/theme/src/cascader/index.less
index 022ecf75ef..4c77a3d53e 100644
--- a/packages/theme/src/cascader/index.less
+++ b/packages/theme/src/cascader/index.less
@@ -19,16 +19,16 @@
 @tag-prefix-cls: ~'@{css-prefix}tag';
 
 .@{cascader-prefix-cls} {
-  .component-css-vars-cascader();
+  .inject-Cascader-vars();
 
   display: inline-block;
   position: relative;
-  font-size: var(--ti-cascader-font-size);
+  font-size: var(--tv-Cascader-font-size);
 
   &:not(.is-disabled):hover {
     .@{input-prefix-cls}__inner {
       cursor: pointer;
-      border-color: var(--ti-cascader-hover-border-color);
+      border-color: var(--tv-Cascader-hover-border-color);
     }
   }
 
@@ -39,21 +39,21 @@
       text-overflow: ellipsis;
 
       &:focus {
-        border-color: var(--ti-cascader-focus-border-color);
+        border-color: var(--tv-Cascader-focus-border-color);
       }
     }
 
     .@{input-prefix-cls}__icon {
-      font-size: var(--ti-cascader-input-icon-font-size);
+      font-size: var(--tv-Cascader-input-icon-font-size);
     }
 
     &.is-focus .@{input-prefix-cls}__inner {
-      border-color: var(--ti-cascader-focus-border-color);
+      border-color: var(--tv-Cascader-focus-border-color);
     }
 
     .@{css-prefix}icon-arrow-down {
       transition: transform 0.3s;
-      font-size: var(--ti-cascader-font-size);
+      font-size: var(--tv-Cascader-font-size);
 
       &.is-reverse {
         transform: rotateZ(180deg);
@@ -61,33 +61,33 @@
     }
 
     .@{css-prefix}icon-circle-close:hover {
-      color: var(--ti-cascader-icon-color);
+      color: var(--tv-Cascader-icon-color);
     }
 
     .@{input-prefix-cls}__icon-close:hover {
-      fill: var(--ti-cascader-close-hover-icon-color);
+      fill: var(--tv-Cascader-close-hover-icon-color);
     }
   }
 
   &--medium {
-    font-size: var(--ti-cascader-medium-font-size);
-    line-height: var(--ti-cascader-medium-line-height);
+    font-size: var(--tv-Cascader-medium-font-size);
+    line-height: var(--tv-Cascader-medium-line-height);
   }
 
   &--small {
-    font-size: var(--ti-cascader-small-font-size);
-    line-height: var(--ti-cascader-small-line-height);
+    font-size: var(--tv-Cascader-small-font-size);
+    line-height: var(--tv-Cascader-small-line-height);
   }
 
   &--mini {
-    font-size: var(--ti-cascader-mini-font-size);
-    line-height: var(--ti-cascader-mini-line-height);
+    font-size: var(--tv-Cascader-mini-font-size);
+    line-height: var(--tv-Cascader-mini-line-height);
   }
 
   &.is-disabled {
     .@{cascader-prefix-cls}__label {
       z-index: 2;
-      color: var(--ti-cascader-disabled-text-color);
+      color: var(--tv-Cascader-disabled-text-color);
     }
   }
 
@@ -96,17 +96,17 @@
   }
 
   &__dropdown {
-    .component-css-vars-cascader();
-
-    margin-left: var(--ti-cascader-dropdown-margin-left);
-    margin-right: var(--ti-cascader-dropdown-margin-right);
-    margin-top: var(--ti-cascader-dropdown-margin-top);
-    margin-bottom: var(--ti-cascader-dropdown-margin-bottom);
-    font-size: var(--ti-cascader-font-size);
-    background: var(--ti-cascader-dropdown-bg-color);
+    .inject-Cascader-vars();
+
+    margin-left: var(--tv-Cascader-dropdown-margin-left);
+    margin-right: var(--tv-Cascader-dropdown-margin-right);
+    margin-top: var(--tv-Cascader-dropdown-margin-top);
+    margin-bottom: var(--tv-Cascader-dropdown-margin-bottom);
+    font-size: var(--tv-Cascader-font-size);
+    background: var(--tv-Cascader-dropdown-bg-color);
     border: none;
-    border-radius: var(--ti-cascader-border-radius);
-    box-shadow: var(--ti-cascader-dropdown-box-shadow);
+    border-radius: var(--tv-Cascader-border-radius);
+    box-shadow: var(--tv-Cascader-dropdown-box-shadow);
     &.is-auto-size {
       background: transparent;
       border: none;
@@ -146,12 +146,12 @@
       display: inline-flex;
       align-items: center;
       max-width: 100%;
-      margin-left: var(--ti-cascader-tag-margin-left);
-      margin-right: var(--ti-cascader-tag-margin-right);
-      margin-top: var(--ti-cascader-tag-margin-top);
-      margin-bottom: var(--ti-cascader-tag-margin-bottom);
+      margin-left: var(--tv-Cascader-tag-margin-left);
+      margin-right: var(--tv-Cascader-tag-margin-right);
+      margin-top: var(--tv-Cascader-tag-margin-top);
+      margin-bottom: var(--tv-Cascader-tag-margin-bottom);
       text-overflow: ellipsis;
-      background: var(--ti-cascader-tag-bg-color);
+      background: var(--tv-Cascader-tag-bg-color);
 
       &:not(.is-hit) {
         border-color: transparent;
@@ -176,11 +176,11 @@
 
       .@{css-prefix}icon-close {
         flex: none;
-        background-color: var(--ti-cascader-tag-icon-bg-color);
-        color: var(--ti-cascader-tag-icon-color);
+        background-color: var(--tv-Cascader-tag-icon-bg-color);
+        color: var(--tv-Cascader-tag-icon-color);
 
         &:hover {
-          background-color: var(--ti-cascader-tag-icon-hover-bg-color);
+          background-color: var(--tv-Cascader-tag-icon-hover-bg-color);
         }
       }
     }
@@ -239,24 +239,24 @@
   }
 
   &__suggestion-panel {
-    border-radius: calc(var(--ti-cascader-border-radius) + 4px);
+    border-radius: calc(var(--tv-Cascader-border-radius) + 4px);
     min-height: 240px;
-    background: var(--ti-cascader-dropdown-bg-color);
+    background: var(--tv-Cascader-dropdown-bg-color);
     box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
   }
 
   &__suggestion-list {
     max-height: 204px;
-    margin-left: var(--ti-cascader-list-margin-left);
-    margin-right: var(--ti-cascader-list-margin-right);
-    margin-top: var(--ti-cascader-list-margin-top);
-    margin-bottom: var(--ti-cascader-list-margin-bottom);
-    padding-left: var(--ti-cascader-list-padding-left);
-    padding-right: var(--ti-cascader-list-padding-right);
-    padding-top: var(--ti-cascader-list-padding-top);
-    padding-bottom: var(--ti-cascader-list-padding-bottom);
-    font-size: var(--ti-cascader-font-size);
-    color: var(--ti-cascader-list-text-color);
+    margin-left: var(--tv-Cascader-list-margin-left);
+    margin-right: var(--tv-Cascader-list-margin-right);
+    margin-top: var(--tv-Cascader-list-margin-top);
+    margin-bottom: var(--tv-Cascader-list-margin-bottom);
+    padding-left: var(--tv-Cascader-list-padding-left);
+    padding-right: var(--tv-Cascader-list-padding-right);
+    padding-top: var(--tv-Cascader-list-padding-top);
+    padding-bottom: var(--tv-Cascader-list-padding-bottom);
+    font-size: var(--tv-Cascader-font-size);
+    color: var(--tv-Cascader-list-text-color);
     text-align: center;
   }
 
@@ -264,25 +264,25 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: var(--ti-cascader-item-height);
+    height: var(--tv-Cascader-item-height);
     padding: 0 8px;
-    font-size: var(--ti-cascader-item-font-size);
-    color: var(--ti-cascader-search-input-text-color);
+    font-size: var(--tv-Cascader-item-font-size);
+    color: var(--tv-Cascader-search-input-text-color);
     text-align: left;
     outline: 0;
     cursor: pointer;
 
     &:focus,
     &:hover {
-      background: var(--ti-cascader-item-hover-bg-color);
+      background: var(--tv-Cascader-item-hover-bg-color);
     }
 
     &.is-checked {
-      color: var(--ti-cascader-item-checked-text-color);
+      color: var(--tv-Cascader-item-checked-text-color);
       font-weight: 700;
 
       .icon-check {
-        fill: var(--ti-cascader-item-checked-text-color);
+        fill: var(--tv-Cascader-item-checked-text-color);
       }
     }
 
@@ -292,21 +292,21 @@
   }
 
   &__empty-text {
-    margin-left: var(--ti-cascader-empty-margin-left);
-    margin-right: var(--ti-cascader-empty-margin-right);
-    margin-top: var(--ti-cascader-empty-margin-top);
-    margin-bottom: var(--ti-cascader-empty-margin-bottom);
-    color: var(--ti-cascader-empty-text-color);
+    margin-left: var(--tv-Cascader-empty-margin-left);
+    margin-right: var(--tv-Cascader-empty-margin-right);
+    margin-top: var(--tv-Cascader-empty-margin-top);
+    margin-bottom: var(--tv-Cascader-empty-margin-bottom);
+    color: var(--tv-Cascader-empty-text-color);
   }
 
   &__search-input {
     flex: 1;
     height: 24px;
     min-width: 60px;
-    margin-left: var(--ti-cascader-search-input-margin-left);
-    padding-left: var(--ti-cascader-search-input-padding-left);
-    color: var(--ti-cascader-search-input-text-color);
-    font-size: var(--ti-cascader-search-input-font-size);
+    margin-left: var(--tv-Cascader-search-input-margin-left);
+    padding-left: var(--tv-Cascader-search-input-padding-left);
+    color: var(--tv-Cascader-search-input-text-color);
+    font-size: var(--tv-Cascader-search-input-font-size);
     border: none;
     outline: 0;
     box-sizing: border-box;
@@ -314,10 +314,10 @@
 
   &__search-input {
     .placeholder(
-      @color: var(--ti-cascader-search-input-placeholder-text-color)
+      @color: var(--tv-Cascader-search-input-placeholder-text-color)
     );
   }
 }
 .@{cascader-prefix-cls}-multiple {
-  width: var(--ti-cascader-width);
+  width: var(--tv-Cascader-width);
 }
diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less
index 9de0989ead..4275cdbecc 100644
--- a/packages/theme/src/cascader/vars.less
+++ b/packages/theme/src/cascader/vars.less
@@ -10,109 +10,107 @@
 *
 */
 
-.component-css-vars-cascader() {
+.inject-Cascader-vars() {
   // 字体大小
-  --ti-cascader-font-size: var(--ti-common-font-size-1, 14px);
+  --tv-Cascader-font-size: var(--tv-font-size-md, 14px);
   // 输入框图标字体大小
-  --ti-cascader-input-icon-font-size: calc(var(--ti-common-font-size-1, 14px) - 4px);
+  --tv-Cascader-input-icon-font-size: 10px; // 无对应变量
   // 悬浮时显示的边框色
-  --ti-cascader-hover-border-color: var(--ti-common-color-line-hover, #191919);
+  --tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
   // 聚焦时显示的边框色
-  --ti-cascader-focus-border-color: var(--ti-common-color-line-active, #191919);
+  --tv-Cascader-focus-border-color: var(--tv-color-border-hover, #191919);
   // 边框圆角
-  --ti-cascader-border-radius: 6px;
+  --tv-Cascader-border-radius: var(--tv-border-radius-md, 6px);
   // icon图标色
-  --ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal, #808080);
+  --tv-Cascader-icon-color: var(--tv-color-icon, #808080);
   // medium尺寸时的字体大小
-  --ti-cascader-medium-font-size: var(--ti-common-font-size-1, 14px);
+  --tv-Cascader-medium-font-size: var(--tv-font-size-md, 14px);
   // medium尺寸时的行高
-  --ti-cascader-medium-line-height: 36px;
+  --tv-Cascader-medium-line-height: 36px;
   // small尺寸时的行高
-  --ti-cascader-small-line-height: 32px;
+  --tv-Cascader-small-line-height: 32px;
   // mini尺寸时的行高
-  --ti-cascader-mini-line-height: 28px;
+  --tv-Cascader-mini-line-height: 28px;
   // small尺寸时的字体大小
-  --ti-cascader-small-font-size: var(--ti-common-font-size-bas);
+  --tv-Cascader-small-font-size: var(--tv-font-size-md, 14px);
   // mini尺寸时的字体大小
-  --ti-cascader-mini-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Cascader-mini-font-size: var(--tv-font-size-md, 14px);
   // 禁用状态时的文本色
-  --ti-cascader-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-Cascader-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // 下拉框背景色
-  --ti-cascader-dropdown-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
+  --tv-Cascader-dropdown-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 输入框标签背景色
-  --ti-cascader-tag-bg-color: var(--ti-common-color-bg-white-emphasize, #f0f0f0);
+  --tv-Cascader-tag-bg-color: var(--tv-color-bg-header, #f0f0f0);
   // 输入框标签的icon图标背景色
-  --ti-cascader-tag-icon-bg-color: var(--ti-common-color-icon-graybg-disabled, #c2c2c2);
+  --tv-Cascader-tag-icon-bg-color: var(--tv-color-icon-disabled, #c2c2c2);
   // 输入框标签的icon图标色
-  --ti-cascader-tag-icon-color: var(--ti-common-color-icon-white, #fff);
+  --tv-Cascader-tag-icon-color: var(--tv-color-icon-white, #fff);
   // 输入框标签的icon图标悬浮时显示的背景色
-  --ti-cascader-tag-icon-hover-bg-color: var(--ti-common-color-icon-graybg-normal, #808080);
+  --tv-Cascader-tag-icon-hover-bg-color: var(--tv-color-icon, #808080);
   // 下拉列表的文本色（没有生效）
-  --ti-cascader-list-text-color: #191919;
+  --tv-Cascader-list-text-color: var(--tv-color-text);
   // 下拉列表子项的高度（没有生效）
-  --ti-cascader-item-height: var(--ti-common-size-height-normal, 32px);
+  --tv-Cascader-item-height: 32px;
   // 下拉列表子项悬浮时的背景色（没有生效）
-  --ti-cascader-item-hover-bg-color: #f5f7fa;
-  // 下拉列表子项选中时的文本色（没有生效）
-  --ti-cascader-item-checked-text-color: var(--ti-base-color-primary-active);
+  --tv-Cascader-item-hover-bg-color: #f5f7fa; // 无对应
   // 搜索后下拉列表无匹配数据的文本色
-  --ti-cascader-empty-text-color: var(--ti-common-color-text-weaken, #808080);
+  --tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
   // 搜索框的文本色（没有生效）
-  --ti-cascader-search-input-text-color: var(--ti-common-color-info-normal, #191919);
+  --tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
   // 搜索框的占位符的文本色（没有生效）
-  --ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #808080);
+  --tv-Cascader-search-input-placeholder-text-color: var(--tv-color-text-placeholder, #808080);
   // 下拉框的阴影
-  --ti-cascader-dropdown-box-shadow: var(--ti-common-shadow-3-left, -4px 0 16px 0 rgba(0, 0, 0, 0.08));
+  --tv-Cascader-dropdown-box-shadow: var(--tv-shadow-3-left, -4px 0 16px 0 rgba(0, 0, 0, 0.08));
   // 多选模式输入框宽度
-  --ti-cascader-width: '100%';
+  --tv-Cascader-width: '100%';
   // 下拉框的左侧外边距
-  --ti-cascader-dropdown-margin-left: var(--ti-common-space-0, 0px);
+  --tv-Cascader-dropdown-margin-left: 0;
   // 下拉框的右侧侧外边距
-  --ti-cascader-dropdown-margin-right: var(--ti-common-space-0, 0px);
+  --tv-Cascader-dropdown-margin-right: 0;
   // 下拉框的顶部外边距
-  --ti-cascader-dropdown-margin-top: 4px;
+  --tv-Cascader-dropdown-margin-top: var(--tv-space-md, 4px);
   // 下拉框的底部外边距
-  --ti-cascader-dropdown-margin-bottom: 4px;
+  --tv-Cascader-dropdown-margin-bottom: var(--tv-space-md, 4px);
   // 输入框标签左侧外边距
-  --ti-cascader-tag-margin-left: var(--ti-common-space-6, 6px);
+  --tv-Cascader-tag-margin-left: 6px;
   // 输入框标签右侧外边距
-  --ti-cascader-tag-margin-right: var(--ti-common-space-0, 0px);
+  --tv-Cascader-tag-margin-right: 0;
   // 输入框标签顶部外边距
-  --ti-cascader-tag-margin-top: calc(var(--ti-common-space-1, 1px) + 1px);
+  --tv-Cascader-tag-margin-top: var(--tv-space-xs, 2px);
   // 输入框标签底部外边距
-  --ti-cascader-tag-margin-bottom: calc(var(--ti-common-space-1, 1px) + 1px);
+  --tv-Cascader-tag-margin-bottom: var(--tv-space-xs, 2px);
   // 下拉框列表的左侧外边距（没有生效）
-  --ti-cascader-list-margin-left: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-margin-left: 0;
   // 下拉框列表的右侧外边距（没有生效）
-  --ti-cascader-list-margin-right: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-margin-right: 0;
   // 下拉框列表的顶部外边距（没有生效）
-  --ti-cascader-list-margin-top: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-margin-top: 0;
   // 下拉框列表的底部外边距（没有生效）
-  --ti-cascader-list-margin-bottom: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-margin-bottom: 0;
   // 下拉框列表的左侧外边距（没有生效）
-  --ti-cascader-list-padding-left: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-padding-left: 0;
   // 下拉框列表的右侧外边距（没有生效）
-  --ti-cascader-list-padding-right: var(--ti-common-space-0, 0px);
+  --tv-Cascader-list-padding-right: 0;
   // 下拉框列表的顶部外边距（没有生效）
-  --ti-cascader-list-padding-top: var(--ti-common-space-6, 6px);
+  --tv-Cascader-list-padding-top: 6px;
   // 下拉框列表的底部外边距（没有生效）
-  --ti-cascader-list-padding-bottom: var(--ti-common-space-6, 6px);
+  --tv-Cascader-list-padding-bottom: 6px;
   // 搜索后下拉列表无匹配数据左侧外边距
-  --ti-cascader-empty-margin-left: var(--ti-common-space-0, 0px);
+  --tv-Cascader-empty-margin-left: 0;
   // 搜索后下拉列表无匹配数据右侧外边距
-  --ti-cascader-empty-margin-right: var(--ti-common-space-0, 0px);
+  --tv-Cascader-empty-margin-right: 0;
   // 搜索后下拉列表无匹配数据顶部外边距
-  --ti-cascader-empty-margin-top: var(--ti-common-space-10, 10px);
+  --tv-Cascader-empty-margin-top: 10px;
   // 搜索后下拉列表无匹配数据底部外边距
-  --ti-cascader-empty-margin-bottom: var(--ti-common-space-10, 10px);
+  --tv-Cascader-empty-margin-bottom: 10px;
   // 搜索框的左侧外边距（没有生效）
-  --ti-cascader-search-input-margin-left: calc(var(--ti-common-space-1, 1px) + 1px);
+  --tv-Cascader-search-input-margin-left: var(--tv-space-xs, 2px);
   // 搜索框的左侧内边距（没有生效）
-  --ti-cascader-search-input-padding-left: var(--ti-common-space-2x, 8px);
+  --tv-Cascader-search-input-padding-left: var(--tv-space-md, 8px);
   // 下拉列表子项的字体大小
-  --ti-cascader-item-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Cascader-item-font-size: var(--tv-font-size-md, 14px);
   // 搜索框的字体大小（没有生效）
-  --ti-cascader-search-input-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Cascader-search-input-font-size: var(--tv-font-size-md, 14px);
   // 输入框关闭图标hover时的颜色
-  --ti-cascader-close-hover-icon-color: #191919;
+  --tv-Cascader-close-hover-icon-color: var(--tv-color-icon-hover, #191919);
 }