tdesign-react/esm/common/style/web/components/list/_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

@import "../../_variables.less";

// 颜色
@list-bg-color-default: @bg-color-container;
@list-bg-color-strip: @bg-color-secondarycontainer;
@list-item-split-color: @border-level-1-color;
@list-avatar-bg-color: @bg-color-page;
@list-text-color-loading: @text-color-placeholder;
// @list-icon-color-loading: @brand-color-5;
@list-text-color-load-more: @text-color-placeholder;
@list-meta-title-color: @text-color-primary;
@list-meta-description-color: @text-color-primary;
@list-action-color: @brand-color;
@list-action-icon-color: @text-color-secondary;
@list-link-color: @text-color-link;
@list-font-color: @text-color-primary;

// 间距
@list-padding: @comp-paddingTB-m @comp-paddingLR-l;
@list-item-spacer-small: @comp-paddingTB-s @comp-paddingLR-m;
@list-item-spacer-default: @comp-paddingTB-m @comp-paddingLR-l;
@list-item-spacer-large: @comp-paddingTB-l @comp-paddingLR-xl;
// @list-meta-padding: @spacer-s 0;
@list-avatar-margin-right: @comp-margin-l;
@list-meta-title-margin: 0 0 @comp-margin-s;
@list-meta-description-margin-right: @comp-margin-xxl;
@list-action-margin-right: @comp-margin-l;
@list-load-not-empty-padding: @comp-paddingTB-m @comp-paddingLR-l;
@list-load-icon-margin: @comp-margin-s;

// 尺寸
@list-item-line-height: @text-line-height-base;
@list-avatar-size: @comp-size-xxxl;
@list-icon-size: @comp-size-xxxs;

// 字体
@list-item-font: @font-body-medium;
@list-meta-title-font: @font-title-medium;
@list-load-font-size: @comp-size-xxxs;
@list-load-more-font-size: @comp-size-xxxs;

// 行号
@list-load-line-height: @text-line-height-base;