tdesign-react/esm/style/web/components/tree/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

// 颜色
@tree-node-text-color: @text-color-primary;
@tree-node-empty-text-color: @text-color-disabled;
@tree-node-bg-hover-color: @bg-color-container-hover;
@tree-node-text-active-color: @text-color-primary;
@tree-node-icon-active-color: @text-color-brand;
@tree-node-bg-active-color: @brand-color-light;
@tree-node-icon-color: @text-color-secondary;
@tree-node-icon-line-color: @border-level-1-color;
@tree-disabled-color: @text-color-disabled;
@tree-icon-disabled-color: @tree-node-icon-color;

//字体
@tree-font: @font-body-medium;
@tree-font-size: @font-size-base;
@tree-font-line-height: @text-line-height-base;

// 间距
@tree-node-padding-basic: @comp-margin-xxl;
@tree-node-item-padding-left: calc(@tree-node-padding-basic * var(--level));
@tree-node-item-padding: @comp-paddingTB-xs 0 @comp-paddingTB-xs @tree-node-item-padding-left;
@tree-line-position-bottom: @comp-margin-l;
@tree-line-position-left: calc(@tree-node-padding-basic * var(--level) - @comp-margin-l);
@tree-label-margin-left: @comp-margin-xs;
@tree-label-padding: @comp-paddingTB-xxs @comp-paddingLR-xs;

//尺寸
@tree-line-width: 1px;
@tree-node-item-height: calc(@comp-size-m + 2px);
@tree-line-before-width: @comp-margin-m;
@tree-line-leaf-width: @comp-margin-m;
@tree-line-first-height: @tree-font-line-height;
@tree-node-item-origin-height: calc(@tree-node-item-height * var(--hscale) + 0px);
@tree-node-icon-size: calc(@tree-font-size + 2px);

// 动画
@tree-node-animation-time: 300ms;
@tree-node-transition-time: 150ms;

// 拖拽
@tree-node-drag-tip-height: 2px;
@tree-node-drag-tip-bg: @brand-color;
@tree-node-drag-bg-highlight: @brand-color-light;