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

// 颜色
@comment-bg-color-secondary: @bg-color-secondarycontainer;
@comment-text-color-default: @text-color-primary;
@comment-text-color-secondary: @text-color-placeholder;
@comment-text-color-hover: @text-color-link;
@comment-border-color-default: @component-stroke;

// 字体尺寸、行高
@comment-author-text-size: @font-title-medium;
@comment-content-text-size: @font-body-medium;
@comment-secondary-text-size: @font-body-small;

// 盒模型尺寸
@comment-padding-s: @comp-paddingTB-s @comp-paddingLR-s;
@comment-avatar-margin-right: @comp-margin-xxl;
@comment-author-margin-bottom: @comp-margin-s;
@comment-author-time-padding-right: @comp-paddingLR-s;
@comment-author-name-padding-right: @comp-paddingLR-s;
@comment-actions-margin-top: @comp-margin-s;
@comment-actions-gap: @comp-margin-s;
@comment-quote-margin-top: @comp-margin-l;
@comment-quote-padding-left: @comp-margin-l;
@comment-reply-margin-left: calc(@comp-size-xxxl + @comp-margin-xxl);
@comment-reply-margin-top: @comp-margin-l;
@comment-reply-padding: @comp-paddingTB-l @comp-paddingLR-xl;
@comment-avatar-size: @comp-size-xxxl;