@sdata/web-vue 4.7.1 → 5.0.0

package/es/transfer/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -89,3 +90,201 @@ $transfer-pagination-gap-separator: global.$spacing-4;
 $transfer-operation-padding-horizontal: global.$spacing-8;
 
 $transfer-operation-gap-buttons: global.$spacing-6;
+
+// @generated runtime tokens — pnpm theme:generate
+$transfer-width: theme-runtime.token('transfer', 'transfer-width', $transfer-width);
+$transfer-height: theme-runtime.token('transfer', 'transfer-height', $transfer-height);
+$transfer-height-title: theme-runtime.token(
+  'transfer',
+  'transfer-height-title',
+  $transfer-height-title,
+  'size-10'
+);
+$transfer-height-footer: theme-runtime.token(
+  'transfer',
+  'transfer-height-footer',
+  $transfer-height-footer,
+  'size-10'
+);
+$transfer-padding-horizontal-footer: theme-runtime.token(
+  'transfer',
+  'transfer-padding-horizontal-footer',
+  $transfer-padding-horizontal-footer,
+  'spacing-4'
+);
+$transfer-border-color: theme-runtime.token(
+  'transfer',
+  'transfer-border-color',
+  $transfer-border-color
+);
+$transfer-border-width: theme-runtime.token(
+  'transfer',
+  'transfer-border-width',
+  $transfer-border-width,
+  'border-1'
+);
+$transfer-border-radius: theme-runtime.token(
+  'transfer',
+  'transfer-border-radius',
+  $transfer-border-radius
+);
+$transfer-font-size-header: theme-runtime.token(
+  'transfer',
+  'transfer-font-size-header',
+  $transfer-font-size-header,
+  'font-size-body-3'
+);
+$transfer-font-size-header-unit: theme-runtime.token(
+  'transfer',
+  'transfer-font-size-header-unit',
+  $transfer-font-size-header-unit,
+  'font-size-body-1'
+);
+$transfer-font-size-icon: theme-runtime.token(
+  'transfer',
+  'transfer-font-size-icon',
+  $transfer-font-size-icon,
+  'font-size-body-1'
+);
+$transfer-font-weight-header: theme-runtime.token(
+  'transfer',
+  'transfer-font-weight-header',
+  $transfer-font-weight-header,
+  'font-weight-500'
+);
+$transfer-color-text-header: theme-runtime.token(
+  'transfer',
+  'transfer-color-text-header',
+  $transfer-color-text-header
+);
+$transfer-color-text-header-unit: theme-runtime.token(
+  'transfer',
+  'transfer-color-text-header-unit',
+  $transfer-color-text-header-unit
+);
+$transfer-color-icon: theme-runtime.token('transfer', 'transfer-color-icon', $transfer-color-icon);
+$transfer-color-bg-icon: theme-runtime.token(
+  'transfer',
+  'transfer-color-bg-icon',
+  $transfer-color-bg-icon
+);
+$transfer-color-bg-header: theme-runtime.token(
+  'transfer',
+  'transfer-color-bg-header',
+  $transfer-color-bg-header
+);
+$transfer-search-padding-left: theme-runtime.token(
+  'transfer',
+  'transfer-search-padding-left',
+  $transfer-search-padding-left
+);
+$transfer-search-padding-right: theme-runtime.token(
+  'transfer',
+  'transfer-search-padding-right',
+  $transfer-search-padding-right
+);
+$transfer-search-padding-top: theme-runtime.token(
+  'transfer',
+  'transfer-search-padding-top',
+  $transfer-search-padding-top
+);
+$transfer-search-padding-bottom: theme-runtime.token(
+  'transfer',
+  'transfer-search-padding-bottom',
+  $transfer-search-padding-bottom
+);
+$transfer-item-color-bg_default: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-bg-default',
+  $transfer-item-color-bg_default,
+  'color-transparent'
+);
+$transfer-item-color-bg_hover: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-bg-hover',
+  $transfer-item-color-bg_hover
+);
+$transfer-item-color-bg_disabled: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-bg-disabled',
+  $transfer-item-color-bg_disabled,
+  'color-transparent'
+);
+$transfer-item-color_default: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-default',
+  $transfer-item-color_default
+);
+$transfer-item-color_hover: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-hover',
+  $transfer-item-color_hover
+);
+$transfer-item-color_disabled: theme-runtime.token(
+  'transfer',
+  'transfer-item-color-disabled',
+  $transfer-item-color_disabled
+);
+$transfer-item-height: theme-runtime.token(
+  'transfer',
+  'transfer-item-height',
+  $transfer-item-height,
+  'size-9'
+);
+$transfer-item-padding-horizontal: theme-runtime.token(
+  'transfer',
+  'transfer-item-padding-horizontal',
+  $transfer-item-padding-horizontal,
+  'spacing-5'
+);
+$transfer-item-font-size: theme-runtime.token(
+  'transfer',
+  'transfer-item-font-size',
+  $transfer-item-font-size,
+  'font-size-body-3'
+);
+$transfer-item-draggable-color-bg-gap: theme-runtime.token(
+  'transfer',
+  'transfer-item-draggable-color-bg-gap',
+  $transfer-item-draggable-color-bg-gap,
+  'color-primary-6'
+);
+$transfer-item-draggable-color-bg_dragging: theme-runtime.token(
+  'transfer',
+  'transfer-item-draggable-color-bg-dragging',
+  $transfer-item-draggable-color-bg_dragging
+);
+$transfer-item-draggable-color_dragging: theme-runtime.token(
+  'transfer',
+  'transfer-item-draggable-color-dragging',
+  $transfer-item-draggable-color_dragging
+);
+$transfer-item-draggable-color_blink: theme-runtime.token(
+  'transfer',
+  'transfer-item-draggable-color-blink',
+  $transfer-item-draggable-color_blink
+);
+$transfer-pagination-width-input: theme-runtime.token(
+  'transfer',
+  'transfer-pagination-width-input',
+  $transfer-pagination-width-input,
+  'size-6'
+);
+$transfer-pagination-gap-separator: theme-runtime.token(
+  'transfer',
+  'transfer-pagination-gap-separator',
+  $transfer-pagination-gap-separator,
+  'spacing-4'
+);
+$transfer-operation-padding-horizontal: theme-runtime.token(
+  'transfer',
+  'transfer-operation-padding-horizontal',
+  $transfer-operation-padding-horizontal,
+  'spacing-8'
+);
+$transfer-operation-gap-buttons: theme-runtime.token(
+  'transfer',
+  'transfer-operation-gap-buttons',
+  $transfer-operation-gap-buttons,
+  'spacing-6'
+);

package/es/tree/style/index.css

@@ -28,8 +28,8 @@
   align-items: center;
   width: 12px;
   height: 32px;
-  margin-right: 10px;
-  color: var(--sd-color-text-2);
+  margin-right: var(--component-tree-tree-margin-switcher-icon-right, var(--component-tree-margin-switcher-icon-right, var(--spacing-5, 10px)));
+  color: var(--component-tree-tree-color-switcher-icon, var(--component-tree-color-switcher-icon, var(--sd-color-text-2)));
   font-size: 12px;
   cursor: pointer;
   user-select: none;
@@ -47,27 +47,27 @@
   transform: rotate(0);
 }
 .sd-tree-node-drag-icon {
-  margin-left: 120px;
-  color: rgb(var(--sd-primary-6));
+  margin-left: var(--component-tree-tree-spacing-drag-icon-text, var(--component-tree-spacing-drag-icon-text, var(--spacing-22, 120px)));
+  color: var(--component-tree-tree-color-drag-icon, var(--component-tree-color-drag-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   opacity: 0;
 }
 .sd-tree-node-custom-icon {
-  margin-right: 10px;
+  margin-right: var(--component-tree-tree-margin-custom-icon-right, var(--component-tree-margin-custom-icon-right, var(--spacing-5, 10px)));
   font-size: inherit;
   line-height: 1;
   cursor: pointer;
   user-select: none;
 }
 .sd-tree-node .sd-icon-loading {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-tree-tree-color-loading-icon, var(--component-tree-color-loading-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-tree-node-minus-icon, .sd-tree-node-plus-icon {
   position: relative;
   display: block;
   width: 14px;
   height: 14px;
-  background: var(--sd-color-fill-2);
-  border-radius: var(--sd-border-radius-small);
+  background: var(--component-tree-tree-showline-color-plus-icon-bg, var(--component-tree-showline-color-plus-icon-bg, var(--sd-color-fill-2)));
+  border-radius: var(--component-tree-tree-showline-border-plus-icon-radius, var(--component-tree-showline-border-plus-icon-radius, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-tree-node-minus-icon::after, .sd-tree-node-plus-icon::after {
@@ -79,8 +79,8 @@
   height: 2px;
   margin-top: -1px;
   margin-left: -3px;
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-text-2);
+  color: var(--component-tree-tree-color-switcher-icon, var(--component-tree-color-switcher-icon, var(--sd-color-text-2)));
+  background-color: var(--component-tree-tree-color-switcher-icon, var(--component-tree-color-switcher-icon, var(--sd-color-text-2)));
   border-radius: 0.5px;
   content: "";
 }
@@ -93,18 +93,18 @@
   height: 6px;
   margin-top: -3px;
   margin-left: -1px;
-  color: var(--sd-color-text-2);
-  background-color: var(--sd-color-text-2);
+  color: var(--component-tree-tree-color-switcher-icon, var(--component-tree-color-switcher-icon, var(--sd-color-text-2)));
+  background-color: var(--component-tree-tree-color-switcher-icon, var(--component-tree-color-switcher-icon, var(--sd-color-text-2)));
   border-radius: 0.5px;
   content: "";
 }
 
 /******* tree ***********/
 .sd-tree {
-  color: var(--sd-color-text-1);
+  color: var(--component-tree-tree-color-title-text, var(--component-tree-color-title-text, var(--sd-color-text-1)));
 }
 .sd-tree .sd-checkbox {
-  margin-right: 10px;
+  margin-right: var(--component-tree-tree-margin-checkbox-right, var(--component-tree-margin-checkbox-right, var(--spacing-5, 10px)));
   padding-left: 0;
   line-height: 32px;
 }
@@ -114,23 +114,30 @@
   flex-wrap: nowrap;
   align-items: center;
   padding-left: 2px;
-  color: var(--sd-color-text-1);
+  color: var(--component-tree-tree-color-title-text, var(--component-tree-color-title-text, var(--sd-color-text-1)));
   line-height: 1.5715;
   cursor: pointer;
 }
 .sd-tree-node-selected .sd-tree-node-title, .sd-tree-node-selected .sd-tree-node-title:hover {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-tree-tree-color-title-text-active, var(--component-tree-color-title-text-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+.sd-tree-node:not(.sd-tree-node-disabled):focus-visible {
+  outline: none;
+}
+.sd-tree-node:not(.sd-tree-node-disabled):focus-visible .sd-tree-node-title {
+  color: var(--component-tree-tree-color-title-text-hover, var(--component-tree-color-title-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-tree-tree-color-title-bg-hover, var(--component-tree-color-title-bg-hover, var(--sd-color-fill-2)));
+}
 .sd-tree-node-disabled-selectable .sd-tree-node-title,
 .sd-tree-node-disabled-selectable .sd-tree-node-title:hover, .sd-tree-node-disabled .sd-tree-node-title,
 .sd-tree-node-disabled .sd-tree-node-title:hover {
-  color: var(--sd-color-text-4);
+  color: var(--component-tree-tree-color-title-text-disabled, var(--component-tree-color-title-text-disabled, var(--sd-color-text-4)));
   background: none;
   cursor: not-allowed;
 }
 .sd-tree-node-disabled.sd-tree-node-selected .sd-tree-node-title {
-  color: var(--sd-color-primary-light-3);
+  color: var(--component-tree-tree-color-title-text-active-disabled, var(--component-tree-color-title-text-active-disabled, var(--sd-color-primary-light-3)));
 }
 .sd-tree-node-title-block {
   flex: 1;
@@ -138,7 +145,7 @@
 }
 .sd-tree-node-title-block .sd-tree-node-drag-icon {
   position: absolute;
-  right: 12px;
+  right: var(--component-tree-tree-spacing-drag-icon-right, var(--component-tree-spacing-drag-icon-right, var(--spacing-6, 12px)));
 }
 .sd-tree-node-title-block .sd-tree-node-title-text {
   display: block;
@@ -172,7 +179,7 @@
   display: inline-block;
   width: 12px;
   height: 100%;
-  margin-right: 10px;
+  margin-right: var(--component-tree-tree-margin-switcher-icon-right, var(--component-tree-margin-switcher-icon-right, var(--spacing-5, 10px)));
   vertical-align: top;
 }
 .sd-tree-node-draggable {
@@ -182,16 +189,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  margin-left: -4px;
+  margin-left: -var(--component-tree-tree-padding-title-horizontal, var(--component-tree-padding-title-horizontal, var(--spacing-2, 4px)));
   padding: 5px 0;
-  padding-right: 4px;
-  padding-left: 4px;
+  padding-right: var(--component-tree-tree-padding-title-horizontal, var(--component-tree-padding-title-horizontal, var(--spacing-2, 4px)));
+  padding-left: var(--component-tree-tree-padding-title-horizontal, var(--component-tree-padding-title-horizontal, var(--spacing-2, 4px)));
   font-size: 14px;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-tree-tree-node-border-radius, var(--component-tree-node-border-radius, var(--sd-border-radius-small)));
 }
 .sd-tree-node-title:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-tree-tree-color-title-text-hover, var(--component-tree-color-title-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-tree-tree-color-title-bg-hover, var(--component-tree-color-title-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-tree-node-title:hover .sd-tree-node-drag-icon {
   opacity: 1;
@@ -209,18 +216,18 @@
 .sd-tree-node-title-gap-bottom::before {
   top: unset;
   bottom: -2px;
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-tree-tree-draggable-color-gap-bg, var(--component-tree-draggable-color-gap-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-tree-node-title-gap-top::before {
-  background-color: rgb(var(--sd-primary-6));
+  background-color: var(--component-tree-tree-draggable-color-gap-bg, var(--component-tree-draggable-color-gap-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-tree-node-title-highlight {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-primary-light-1);
+  color: var(--component-tree-tree-color-title-text-highlight, var(--component-tree-color-title-text-highlight, var(--sd-color-text-1)));
+  background-color: var(--component-tree-tree-color-title-bg-highlight, var(--component-tree-color-title-bg-highlight, var(--sd-color-primary-light-1)));
 }
 .sd-tree-node-title-dragging, .sd-tree-node-title-dragging:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-1);
+  color: var(--component-tree-tree-color-title-text-dragging, var(--component-tree-color-title-text-dragging, var(--sd-color-text-4)));
+  background-color: var(--component-tree-tree-color-title-bg-dragging, var(--component-tree-color-title-bg-dragging, var(--sd-color-fill-1)));
 }
 .sd-tree-show-line {
   padding-left: 1px;
@@ -239,8 +246,8 @@
   position: absolute;
   left: 50%;
   box-sizing: border-box;
-  width: 1px;
-  border-left: 1px solid var(--sd-color-neutral-3);
+  width: var(--component-tree-tree-showline-size-line-width, var(--component-tree-showline-size-line-width, var(--border-1, 1px)));
+  border-left: var(--component-tree-tree-showline-size-line-width, var(--component-tree-showline-size-line-width, var(--border-1, 1px))) var(--component-tree-tree-showline-style-line, var(--component-tree-showline-style-line, var(--border-solid, solid))) var(--component-tree-tree-showline-color-line-bg, var(--component-tree-showline-color-line-bg, var(--sd-color-neutral-3)));
   transform: translateX(-50%);
   content: "";
   top: -5px;
@@ -250,8 +257,8 @@
   position: absolute;
   right: -7px;
   box-sizing: border-box;
-  width: 1px;
-  border-left: 1px solid var(--sd-color-neutral-3);
+  width: var(--component-tree-tree-showline-size-line-width, var(--component-tree-showline-size-line-width, var(--border-1, 1px)));
+  border-left: var(--component-tree-tree-showline-size-line-width, var(--component-tree-showline-size-line-width, var(--border-1, 1px))) var(--component-tree-tree-showline-style-line, var(--component-tree-showline-style-line, var(--border-solid, solid))) var(--component-tree-tree-showline-color-line-bg, var(--component-tree-showline-color-line-bg, var(--sd-color-neutral-3)));
   transform: translateX(50%);
   content: "";
   top: 27px;

package/es/tree/style/index.scss

@@ -160,6 +160,16 @@ $tree-node-prefix-cls: string.unquote('#{theme.$prefix}-tree-node');
       transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
     }
 
+    // 键盘焦点（roving tabindex + 程序化聚焦后属于 focus-visible）与 hover 保持同一视觉
+    &:not(&-disabled):focus-visible {
+      outline: none;
+
+      .#{$tree-node-prefix-cls}-title {
+        color: $tree-color-title-text_hover;
+        background-color: $tree-color-title-bg_hover;
+      }
+    }
+
     &-disabled-selectable,
     &-disabled {
       .#{$tree-node-prefix-cls}-title,

package/es/tree/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -97,3 +98,165 @@ $tree-size-small-line-height: global.$size-small;
 $tree-size-default-line-height: global.$size-default;
 
 $tree-size-large-line-height: global.$size-large;
+
+// @generated runtime tokens — pnpm theme:generate
+$tree-color-title-text: theme-runtime.token(
+  'tree',
+  'tree-color-title-text',
+  $tree-color-title-text
+);
+$tree-color-title-text_hover: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-hover',
+  $tree-color-title-text_hover
+);
+$tree-color-title-text_active: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-active',
+  $tree-color-title-text_active,
+  'color-primary-6'
+);
+$tree-color-title-text_disabled: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-disabled',
+  $tree-color-title-text_disabled
+);
+$tree-color-title-text_active_disabled: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-active-disabled',
+  $tree-color-title-text_active_disabled
+);
+$tree-color-title-bg_hover: theme-runtime.token(
+  'tree',
+  'tree-color-title-bg-hover',
+  $tree-color-title-bg_hover
+);
+$tree-color-title-bg_highlight: theme-runtime.token(
+  'tree',
+  'tree-color-title-bg-highlight',
+  $tree-color-title-bg_highlight
+);
+$tree-color-title-text_highlight: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-highlight',
+  $tree-color-title-text_highlight
+);
+$tree-color-title-bg_dragging: theme-runtime.token(
+  'tree',
+  'tree-color-title-bg-dragging',
+  $tree-color-title-bg_dragging
+);
+$tree-color-title-text_dragging: theme-runtime.token(
+  'tree',
+  'tree-color-title-text-dragging',
+  $tree-color-title-text_dragging
+);
+$tree-color-loading-icon: theme-runtime.token(
+  'tree',
+  'tree-color-loading-icon',
+  $tree-color-loading-icon,
+  'color-primary-6'
+);
+$tree-color-switcher-icon: theme-runtime.token(
+  'tree',
+  'tree-color-switcher-icon',
+  $tree-color-switcher-icon
+);
+$tree-color-drag-icon: theme-runtime.token(
+  'tree',
+  'tree-color-drag-icon',
+  $tree-color-drag-icon,
+  'color-primary-6'
+);
+$tree-node-border-radius: theme-runtime.token(
+  'tree',
+  'tree-node-border-radius',
+  $tree-node-border-radius
+);
+$tree-margin-checkbox-right: theme-runtime.token(
+  'tree',
+  'tree-margin-checkbox-right',
+  $tree-margin-checkbox-right,
+  'spacing-5'
+);
+$tree-margin-switcher-icon-right: theme-runtime.token(
+  'tree',
+  'tree-margin-switcher-icon-right',
+  $tree-margin-switcher-icon-right,
+  'spacing-5'
+);
+$tree-margin-custom-icon-right: theme-runtime.token(
+  'tree',
+  'tree-margin-custom-icon-right',
+  $tree-margin-custom-icon-right,
+  'spacing-5'
+);
+$tree-padding-title-horizontal: theme-runtime.token(
+  'tree',
+  'tree-padding-title-horizontal',
+  $tree-padding-title-horizontal,
+  'spacing-2'
+);
+$tree-spacing-drag-icon-right: theme-runtime.token(
+  'tree',
+  'tree-spacing-drag-icon-right',
+  $tree-spacing-drag-icon-right,
+  'spacing-6'
+);
+$tree-spacing-drag-icon-text: theme-runtime.token(
+  'tree',
+  'tree-spacing-drag-icon-text',
+  $tree-spacing-drag-icon-text,
+  'spacing-22'
+);
+$tree-draggable-color-gap-bg: theme-runtime.token(
+  'tree',
+  'tree-draggable-color-gap-bg',
+  $tree-draggable-color-gap-bg,
+  'color-primary-6'
+);
+$tree-showline-color-line-bg: theme-runtime.token(
+  'tree',
+  'tree-showline-color-line-bg',
+  $tree-showline-color-line-bg
+);
+$tree-showline-color-plus-icon-bg: theme-runtime.token(
+  'tree',
+  'tree-showline-color-plus-icon-bg',
+  $tree-showline-color-plus-icon-bg
+);
+$tree-showline-size-line-width: theme-runtime.token(
+  'tree',
+  'tree-showline-size-line-width',
+  $tree-showline-size-line-width,
+  'border-1'
+);
+$tree-showline-style-line: theme-runtime.token(
+  'tree',
+  'tree-showline-style-line',
+  $tree-showline-style-line,
+  'border-solid'
+);
+$tree-showline-border-plus-icon-radius: theme-runtime.token(
+  'tree',
+  'tree-showline-border-plus-icon-radius',
+  $tree-showline-border-plus-icon-radius
+);
+$tree-size-mini-icon-size: theme-runtime.token(
+  'tree',
+  'tree-size-mini-icon-size',
+  $tree-size-mini-icon-size,
+  'size-3'
+);
+$tree-size-small-icon-size: theme-runtime.token(
+  'tree',
+  'tree-size-small-icon-size',
+  $tree-size-small-icon-size,
+  'size-3'
+);
+$tree-size-large-icon-size: theme-runtime.token(
+  'tree',
+  'tree-size-large-icon-size',
+  $tree-size-large-icon-size,
+  'size-3'
+);

package/es/tree-select/style/index.css

@@ -24,17 +24,17 @@
  **********************************************/
 .sd-tree-select-popup {
   box-sizing: border-box;
-  padding: 4px 0;
+  padding: var(--component-tree-select-tree-select-padding-popup-vertical, var(--component-tree-select-padding-popup-vertical, var(--spacing-2, 4px))) 0;
   background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-select-select-popup-border-radius, var(--component-select-popup-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-select-select-popup-box-shadow, var(--component-select-popup-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-tree-select-popup .sd-tree-select-tree-wrapper {
   height: 100%;
-  max-height: 200px;
-  padding-right: 4px;
-  padding-left: 10px;
+  max-height: var(--component-select-select-popup-max-height, var(--component-select-popup-max-height, var(--size-50, 200px)));
+  padding-right: var(--component-tree-select-tree-select-padding-popup-right, var(--component-tree-select-padding-popup-right, var(--spacing-2, 4px)));
+  padding-left: var(--component-tree-select-tree-select-padding-popup-left, var(--component-tree-select-padding-popup-left, var(--spacing-5, 10px)));
   overflow: auto;
 }
 .sd-tree-select-popup .sd-tree-select-tree-wrapper.sd-tree-select-tree-wrapper-virtual {
@@ -52,11 +52,11 @@
   padding-top: 0;
 }
 .sd-tree-select-header {
-  border-bottom: 1px solid var(--sd-color-fill-3);
+  border-bottom: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }
 .sd-tree-select-has-footer {
   padding-bottom: 0;
 }
 .sd-tree-select-footer {
-  border-top: 1px solid var(--sd-color-fill-3);
+  border-top: 1px solid var(--component-select-select-popup-color-border, var(--component-select-popup-color-border, var(--sd-color-fill-3)));
 }

package/es/tree-select/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -14,3 +15,23 @@ $tree-select-padding-popup-left: global.$spacing-5;
 $tree-select-padding-popup-right: global.$spacing-2;
 
 $tree-select-padding-popup-vertical: global.$spacing-2;
+
+// @generated runtime tokens — pnpm theme:generate
+$tree-select-padding-popup-left: theme-runtime.token(
+  'tree-select',
+  'tree-select-padding-popup-left',
+  $tree-select-padding-popup-left,
+  'spacing-5'
+);
+$tree-select-padding-popup-right: theme-runtime.token(
+  'tree-select',
+  'tree-select-padding-popup-right',
+  $tree-select-padding-popup-right,
+  'spacing-2'
+);
+$tree-select-padding-popup-vertical: theme-runtime.token(
+  'tree-select',
+  'tree-select-padding-popup-vertical',
+  $tree-select-padding-popup-vertical,
+  'spacing-2'
+);