feat(cascader): [cascader,tree] dark theme adaptation (#3136)

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

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>

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>

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>

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

@@ -65,6 +65,6 @@ header {
 }
 :deep(.red) {
   font-weight: bold;
-  color: red;
+  color: #d94838;
 }
 </style>

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>

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>

packages/theme/src/cascader-menu/index.less

@@ -33,7 +33,7 @@
   }
 
   & &__wrap {
-    min-height: 204px;
+    min-height: 208px;
   }
   // tiny 新增： 直接使用级联面板时，高度要放开，不能被 tiny-scrollbar限制了
   & &__wrap-expand {

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;

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图标的色

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__wrap {
           height: auto;
           padding-bottom: 6px;

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);
   // 搜索框的占位符的文本色（没有生效）

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);

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;
   // 面板搜索框字体大小

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);
       }