tdesign-react/esm/style/web/components/chat/_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;
@code-bg-color-page:  @gray-color-14;
@code-font-color-base: @font-white-1;
@chat-refresh-line: #e7e7e7;
@chat-input-hover: inset 0px 2px 4px -1px rgba(0, 0, 0, .12), 0px 4px 5px 0px rgba(0, 0, 0, .08), 0px 1px 10px 0px rgba(0, 0, 0, .05);
@chat-action-icon-padding: 3px;
@chat-sender-radius: calc(@border-radius-extraLarge + @border-radius-small + @border-radius-small); // 16px的圆角
//shadow
@chat-textarea-shadow-active: 0 0 0 2px @brand-color-focus;