Repository: opentiny/tiny-vue
Pull request #3136: feat(cascader): [cascader,tree] dark theme adaptation
Author: login: lcy0620
Labels: name: enhancement
description: New feature or request （功能增强）
Created: 2025-03-17T12:36:45Z | Merged: 2025-03-19T02:48:54Z

# PR

## PR Checklist
feat(cascader): [cascader,transfer,tree] dark theme adaptation
解决穿梭框选中背景色，级联选择自定义高度面板样式
Please check if your PR fulfills the following requirements:

- [ ] The commit message follows our [Commit Message Guidelines](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

## Other information


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Style**
  - Enhanced the Cascader Node visual experience with refined hover backgrounds, updated icon sizing, and clarified active state styling.
  - Improved Cascader component presentation by adding a panel border and streamlining menu appearances.
  - Updated styling variables for more consistent border and text colors.
  - Enhanced the Transfer panel with a distinct active state highlight.
  - Standardized Tree component icon colors and optimized SVG icon layout.
  - Refined custom rendered element colors for a more precise visual tone.
  - Adjusted vertical spacing for the "no data" message in Cascader components.
  - Increased the minimum height of the Cascader menu for improved layout.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
index 456a47b818..01b66117bf 100644
--- a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
@@ -209,6 +209,6 @@ const options = ref([
 <style scoped lang="less">
 .no-data {
   text-align: center;
-  line-height: 240px;
+  line-height: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/cascader/filterable.vue b/examples/sites/demos/pc/app/cascader/filterable.vue
index ce215ea968..ac266061d3 100644
--- a/examples/sites/demos/pc/app/cascader/filterable.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable.vue
@@ -217,6 +217,6 @@ export default {
 <style scoped lang="less">
 .no-data {
   text-align: center;
-  line-height: 240px;
+  line-height: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
index b1410f13bb..a42f27c479 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
@@ -55,6 +55,6 @@ header {
 }
 :deep(.red) {
   font-weight: bold;
-  color: red;
+  color: #d94838;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/transfer/custom-render.vue b/examples/sites/demos/pc/app/transfer/custom-render.vue
index 99c9db7ccf..81832d5536 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render.vue
@@ -65,6 +65,6 @@ header {
 }
 :deep(.red) {
   font-weight: bold;
-  color: red;
+  color: #d94838;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/icons-composition-api.vue b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
index 1915ca6218..ca3e8aaac3 100644
--- a/examples/sites/demos/pc/app/tree/icons-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
@@ -5,9 +5,9 @@
       :data="data"
       show-checkbox
       :expand-icon="expandIcon"
-      expand-icon-color="#c2c2c2"
+      expand-icon-color="#5291FF"
       :shrink-icon="shrinkIcon"
-      shrink-icon-color="#191919"
+      shrink-icon-color="#5291FF"
     >
       <template #prefix="{ node }">
         <component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>
diff --git a/examples/sites/demos/pc/app/tree/icons.vue b/examples/sites/demos/pc/app/tree/icons.vue
index 1af35bac6b..5cb88f9c4a 100644
--- a/examples/sites/demos/pc/app/tree/icons.vue
+++ b/examples/sites/demos/pc/app/tree/icons.vue
@@ -5,9 +5,9 @@
       :data="data"
       show-checkbox
       :expand-icon="expandIcon"
-      expand-icon-color="#c2c2c2"
+      expand-icon-color="#5291FF"
       :shrink-icon="shrinkIcon"
-      shrink-icon-color="#191919"
+      shrink-icon-color="#5291FF"
     >
       <template #prefix="{ node }">
         <component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>
diff --git a/packages/theme/src/cascader-menu/index.less b/packages/theme/src/cascader-menu/index.less
index f8b192fbc3..67f6f4b1be 100644
--- a/packages/theme/src/cascader-menu/index.less
+++ b/packages/theme/src/cascader-menu/index.less
@@ -33,7 +33,7 @@
   }
 
   & &__wrap {
-    min-height: 204px;
+    min-height: 208px;
   }
   // tiny 新增： 直接使用级联面板时，高度要放开，不能被 tiny-scrollbar限制了
   & &__wrap-expand {
diff --git a/packages/theme/src/cascader-node/index.less b/packages/theme/src/cascader-node/index.less
index 7b47bfd078..30386d8423 100644
--- a/packages/theme/src/cascader-node/index.less
+++ b/packages/theme/src/cascader-node/index.less
@@ -29,12 +29,12 @@
     background: var(--tv-CascaderNode-selectable-active-bg-color);
     color: var(--tv-CascaderNode-selectable-text-color);
     &:hover {
-      background: var(--tv-CascaderNode-selectable-hover-bg-color);
+      background: var(--tv-CascaderNode-hover-bg-color);
     }
   }
 
   &.in-active-path:hover {
-    background: var(--tv-CascaderNode-selectable-hover-bg-color);
+    background: var(--tv-CascaderNode-hover-bg-color);
   }
 
   &:not(.is-disabled):not(.in-active-path):not(.is-active) {
@@ -62,7 +62,7 @@
 
   &__prefix,
   &__postfix {
-    font-size: var(--tv-CascaderNode-icon-font-size);
+    font-size: var(--tv-CascaderNode-icon-size);
     fill: var(--tv-CascaderNode-icon-color);
   }
 
@@ -73,6 +73,9 @@
     }
     .@{cascader-node-prefix-cls}__label {
       font-weight: var(--tv-CascaderNode-active-font-weight);
+      svg {
+        fill: var(--tv-CascaderNode-active-icon-color);
+      }
     }
   }
 
@@ -99,7 +102,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
+    svg {
+      font-size: var(--tv-CascaderNode-icon-size);
+      fill: var(--tv-CascaderNode-icon-color);
+    }
     // 兼容ie10-ie11
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       flex-basis: auto;
diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
index 82e9256da1..01f0cf6758 100644
--- a/packages/theme/src/cascader-node/vars.less
+++ b/packages/theme/src/cascader-node/vars.less
@@ -26,7 +26,7 @@
   // 下拉列表子项禁用状态时的背景色
   --tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
   // 下拉列表子项的icon图标的字体大小
-  --tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
+  --tv-CascaderNode-icon-size: var(--tv-font-size-sm, 12px);
   // 下拉列表子项的icon图标的色
   --tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
   // 下拉列表子项禁用时的icon图标的色
diff --git a/packages/theme/src/cascader/index.less b/packages/theme/src/cascader/index.less
index 717f001840..a2d4ed5473 100644
--- a/packages/theme/src/cascader/index.less
+++ b/packages/theme/src/cascader/index.less
@@ -114,13 +114,10 @@
       .@{cascader-prefix-cls}-panel {
         justify-content: flex-start;
         align-items: flex-start;
+        border: solid 1px var(--tv-Cascader-border-color);
       }
-      .@{cascader-prefix-cls}-menu {
-        border: 1px solid #e4e7ed;
-        background:var(--tv-Cascader-dropdown-bg-color);
-        &:not(:first-child) {
-          margin-left: -1px;
-        }
+      .@{cascader-prefix-cls}-menu {  
+        background:var(--tv-Cascader-dropdown-bg-color);   
         .@{cascader-prefix-cls}-menu__wrap {
           height: auto;
           padding-bottom: 6px;
diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less
index 05cf619c15..6f9b699199 100644
--- a/packages/theme/src/cascader/vars.less
+++ b/packages/theme/src/cascader/vars.less
@@ -15,6 +15,8 @@
   --tv-Cascader-font-size: var(--tv-font-size-default, 14px);
   // 输入框图标字体大小
   --tv-Cascader-input-icon-font-size: 10px; // 无对应变量
+  // 下拉菜单边框色
+  --tv-Cascader-border-color: var(--tv-color-border-divider);
   // 悬浮时显示的边框色
   --tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
   // 聚焦时显示的边框色
@@ -54,7 +56,7 @@
   // 下拉列表子项悬浮时的背景色（没有生效）
   --tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
   // 搜索后下拉列表无匹配数据的文本色
-  --tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
+  --tv-Cascader-empty-text-color: var(--tv-color-text-secondary);
   // 搜索框的文本色（没有生效）
   --tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
   // 搜索框的占位符的文本色（没有生效）
diff --git a/packages/theme/src/transfer/index.less b/packages/theme/src/transfer/index.less
index 5584a6b427..e70edaf516 100644
--- a/packages/theme/src/transfer/index.less
+++ b/packages/theme/src/transfer/index.less
@@ -153,7 +153,9 @@
     text-align: left;
     padding-right: var(--tv-Transfer-panel-body-padding-right);
     padding-left: var(--tv-Transfer-panel-body-padding-left);
-
+    .tiny-table.simple table tbody tr:has(td svg.is-check) {
+      background-color: var(--tv-Transfer-panel-item-active-bg-color);
+    }
     &.is-with-footer {
       padding-bottom: var(--tv-Transfer-panel-body-footer-padding-bottom);
       height: var(--tv-Transfer-panel-body-footer-height);
diff --git a/packages/theme/src/transfer/vars.less b/packages/theme/src/transfer/vars.less
index 1e1d520dda..9a559c3459 100644
--- a/packages/theme/src/transfer/vars.less
+++ b/packages/theme/src/transfer/vars.less
@@ -83,6 +83,8 @@
   --tv-Transfer-panel-item-hover-text-color: var(--tv-color-text, #191919);
   // 面板悬浮时背景色
   --tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5);
+  // 面板选中时背景色
+  --tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light);
   // 面板搜索框高度
   --tv-Transfer-panel-filter-height: 32px;
   // 面板搜索框字体大小
diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less
index d3fc6e4f7c..93aa42b611 100644
--- a/packages/theme/src/tree/index.less
+++ b/packages/theme/src/tree/index.less
@@ -360,8 +360,10 @@
     overflow: hidden;
     padding-left: var(--tv-Tree-node-padding-left);
 
-    svg {
+    & > svg {
       fill: var(--tv-Tree-node-operate-icon-color);
+      font-size: var(--tv-Tree-node-operate-icon-font-size);
+      margin-right: calc(var(--tv-Tree-node-label-margin-left) / 2);
       &:hover {
         fill: var(--tv-Tree-node-checked-icon-color);
       }


Reviews:
user: login: petercat-assistant[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-17T12:37:11Z
user: login: petercat-assistant[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-17T12:37:14Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 49d190c0ee53180546577544f1bc36ee06e55fa9 and 5a3afd043bd818521548eb2bbbd3ee6421d841cd.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `examples/sites/demos/pc/app/tree/icons-composition-api.vue` (1 hunks)
* `examples/sites/demos/pc/app/tree/icons.vue` (1 hunks)
* `packages/vue/src/transfer/__tests__/transfer.test.tsx` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (2)</summary>

* examples/sites/demos/pc/app/tree/icons.vue
* examples/sites/demos/pc/app/tree/icons-composition-api.vue

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 GitHub Check: PR Unit Test</summary>

<details>
<summary>packages/vue/src/transfer/__tests__/transfer.test.tsx</summary>

[failure] 120-120: 
ReferenceError: nextTick is not defined
 ❯ ../../packages/vue/src/transfer/__tests__/transfer.test.tsx:120:5



</details>

</details>
<details>
<summary>🪛 GitHub Actions: Unit Test PR--feat(cascader): [cascader,transfer,tree] dark theme adaptation</summary>

<details>
<summary>packages/vue/src/transfer/__tests__/transfer.test.tsx</summary>

[error] 120-120: FAIL PC Mode > left change event: ReferenceError: nextTick is not defined

</details>

</details>

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-18T01:38:34Z
user: login: zzcr
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-03-18T06:57:13Z
user: login: MomoPoppy
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-18T07:05:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>packages/theme/src/cascader-node/vars.less (1)</summary><blockquote>

`29-29`: **Consistent Variable Rename for Icon Size**  
The variable has been renamed from `--tv-CascaderNode-icon-font-size` to `--tv-CascaderNode-icon-size`, which clarifies that it controls icon dimensions rather than text font size. Ensure that all references in related files (for example, in `index.less` if applicable) are updated to maintain consistency across the project.

</blockquote></details>
<details>
<summary>packages/theme/src/tree/index.less (1)</summary><blockquote>

`363-367`: **Enhanced SVG Styling in Tree Component**  
The adjustments applied to the direct child SVG elements of the tree node content—setting the `fill`, `font-size`, and `margin-right` via CSS variables—improve precise control over the icons in the dark theme context. Please verify that the variable `--tv-Tree-node-operate-icon-font-size` is defined appropriately in your theme variables and is conceptually distinct from the cascader icons’ sizing (now using `--tv-CascaderNode-icon-size`). Consistency in naming conventions across similar components helps prevent confusion in future maintenance.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a4437473a0a799ecd5d0aa05d15398db20cc020c and 880562faeecd341a607264e94be3bcfadef27cf3.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue` (1 hunks)
* `examples/sites/demos/pc/app/transfer/custom-render.vue` (1 hunks)
* `packages/theme/src/cascader-node/index.less` (4 hunks)
* `packages/theme/src/cascader-node/vars.less` (1 hunks)
* `packages/theme/src/tree/index.less` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (2)</summary>

* examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
* examples/sites/demos/pc/app/transfer/custom-render.vue

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* packages/theme/src/cascader-node/index.less

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-18T09:27:24Z
user: login: zzcr
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-18T13:49:06Z
user: login: zzcr
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-19T02:48:46Z

Review comments:
diff_hunk: @@ -99,7 +102,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
+    svg {
+      font-size: var(--tv-CascaderNode-icon-font-size);
path: packages/theme/src/cascader-node/index.less
user: login: petercat-assistant[bot]
body: Ensure that the SVG styles are compatible with all supported browsers, especially older versions that might not fully support CSS variables.
created_at: 2025-03-17T12:37:11Z
author_association: NONE
diff_hunk: @@ -153,7 +153,9 @@
     text-align: left;
     padding-right: var(--tv-Transfer-panel-body-padding-right);
     padding-left: var(--tv-Transfer-panel-body-padding-left);
-
+    .tiny-table.simple table tbody tr:has(td svg.is-check) {
+      background-color: var(--tv-Transfer-panel-item-active-bg-color);
path: packages/theme/src/transfer/index.less
user: login: petercat-assistant[bot]
body: Check compatibility of the ':has()' pseudo-class as it may not be supported in all browsers. Consider using an alternative approach for broader compatibility.
created_at: 2025-03-17T12:37:14Z
author_association: NONE
diff_hunk: @@ -117,6 +117,7 @@
         onLeftCheckChange: leftChangeEvent
       }
     })
+    await nextTick()
path: packages/vue/src/transfer/__tests__/transfer.test.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing import for `nextTick`**

You've added `await nextTick()` on line 120 to ensure component updates are processed before testing, which is a good practice. However, `nextTick` is not imported, causing test failures.


Add `nextTick` to your Vue imports:

```diff
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'

// ... other imports and code remain unchanged ...

// Example usage in the test file:
await nextTick()
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: PR Unit Test</summary>

[failure] 120-120: 
ReferenceError: nextTick is not defined
 ❯ ../../packages/vue/src/transfer/__tests__/transfer.test.tsx:120:5



</details>
<details>
<summary>🪛 GitHub Actions: Unit Test PR--feat(cascader): [cascader,transfer,tree] dark theme adaptation</summary>

[error] 120-120: FAIL PC Mode > left change event: ReferenceError: nextTick is not defined

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit a443747
created_at: 2025-03-18T01:38:33Z
author_association: NONE
diff_hunk: @@ -99,7 +102,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
+    svg {
+      font-size: var(--tv-CascaderNode-icon-font-size);
path: packages/theme/src/cascader-node/index.less
user: login: MomoPoppy
body: --tv-CascaderNode-icon-size
created_at: 2025-03-18T07:05:45Z
author_association: COLLABORATOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-17T12:36:53Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
The changes update CSS styling across various components. The Cascader and Cascader Node components now use updated hover background colors, refined border definitions, and adjusted icon sizes and colors. New CSS variables are introduced, and existing ones are updated or renamed. The Transfer and Tree components also receive styling enhancements, including active state backgrounds and SVG adjustments. Vue demo examples reflect corresponding color updates. No modifications were made to the exported public APIs.

## Changes

| Files | Change Summary |
| --- | --- |
| `packages/theme/.../cascader-node/index.less`<br>`packages/theme/.../cascader-node/vars.less` | Updated hover background colors, font sizes for prefix/postfix, and SVG fill rules in active states; renamed `--tv-CascaderNode-icon-font-size` to `--tv-CascaderNode-icon-size`. |
| `packages/theme/.../cascader/index.less`<br>`packages/theme/.../cascader/vars.less` | Added border styling to cascader panels; removed border and margin-left from cascader menus; added new CSS variable for border color and updated the empty text color variable. |
| `packages/theme/.../transfer/index.less`<br>`packages/theme/.../transfer/vars.less` | Added a new rule for active table row background in transfer panels and introduced a variable to define this active background color. |
| `packages/theme/.../tree/index.less` | Modified SVG selector to target direct children and added properties for font-size and margin adjustments for icons. |
| `examples/sites/demos/pc/app/tree/icons-composition-api.vue`<br>`examples/sites/demos/pc/app/tree/icons.vue` | Changed both expand and shrink icon colors to `#5291FF` for consistency in tree components. |
| `examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue`<br>`examples/sites/demos/pc/app/transfer/custom-render.vue` | Updated the `.red` class color from `red` to `#d94838` in transfer demo examples. |
| `examples/sites/demos/pc/app/cascader/filterable-composition-api.vue`<br>`examples/sites/demos/pc/app/cascader/filterable.vue` | Adjusted the line-height of the `.no-data` class from `240px` to `200px` in the filterable components. |
| `packages/theme/.../cascader-menu/index.less` | Increased the `min-height` of the `& &__wrap` class from `204px` to `208px`. |

## Possibly related PRs
- **opentiny/tiny-vue#2361** – Modifies CSS variables within the Cascader Node component, affecting hover and active states.
- **opentiny/tiny-vue#2158** – Updates styling for the Cascader component including border properties in the `index.less` file.
- **opentiny/tiny-vue#2572** – Involves modifications to CSS variables and styles associated with the Cascader component.

## Poem
> I'm a rabbit with hops so spry,  
> Admiring the changes as I twirl by.  
> CSS colors now brightly shine,  
> Borders and icons all align.  
> In a world of styles smooth and neat,  
> I munch on carrots to the rhythmic beat.  
> Hoppy updates make our design complete!

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> <details>
> <summary>examples/sites/demos/pc/app/cascader/filterable.vue</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 8.57.1
> 
> ESLint couldn't find the plugin "eslint-plugin-vue".
> 
> (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-vue@latest --save-dev
> 
> The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".
> 
> If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> <details>
> <summary>examples/sites/demos/pc/app/cascader/filterable-composition-api.vue</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 8.57.1
> 
> ESLint couldn't find the plugin "eslint-plugin-vue".
> 
> (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-vue@latest --save-dev
> 
> The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".
> 
> If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡🧪 Multi-step agentic review comment chat (experimental)</summary>
> 
> - We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
> 						- To enable this feature, set early_access to true under in the settings.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 880562faeecd341a607264e94be3bcfadef27cf3 and cba4ca20a649e839fafdb761c93652cde3ffc038.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `examples/sites/demos/pc/app/cascader/filterable-composition-api.vue` (1 hunks)
* `examples/sites/demos/pc/app/cascader/filterable.vue` (1 hunks)
* `packages/theme/src/cascader-menu/index.less` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (2)</summary>

* examples/sites/demos/pc/app/cascader/filterable.vue
* examples/sites/demos/pc/app/cascader/filterable-composition-api.vue

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>packages/theme/src/cascader-menu/index.less (1)</summary>

`35-37`: **Review the Updated Minimum Height in the Cascader Panel**

The change increases the `min-height` from its previous value to `208px` within the `& &__wrap` block. Please verify that this 4px increment aligns with the dark theme design requirements and overall layout consistency. Ensure that this new height does not cause any visual misalignments—especially if the same style applies across both dark and light themes—and that it works harmoniously with other components in the cascader module.

</details>

</blockquote></details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=opentiny/tiny-vue&utm_content=3136):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: petercat-assistant[bot]
created_at: 2025-03-17T12:37:08Z
body: ### Walkthrough
This pull request introduces dark theme adaptations for the cascader, transfer, and tree components. It addresses issues with selected background colors in the transfer box and custom height panel styles in the cascader.

### Changes
| Files | Summary |
|-------|---------|
| packages/theme/src/cascader-node/index.less | Added styles for SVG elements to adapt to dark theme. |
| packages/theme/src/cascader/index.less | Updated border and background styles for cascader menu and panel. |
| packages/theme/src/cascader/vars.less | Introduced new variables for border color and updated text color variables. |
| packages/theme/src/transfer/index.less | Added styles for active background color in transfer panel. |
| packages/theme/src/transfer/vars.less | Introduced a new variable for active background color in transfer panel. |
| packages/theme/src/tree/vars.less | Updated hover background color for tree nodes. |
author_association: NONE