tdesign-react/esm/style/web/components/form/_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
//字体

@form-font: @font-body-medium;
@form-item-help-font: @font-body-small;

// 行高
@form-item-help-line-height: @text-line-height-s;

// 颜色
@form-color-label: @text-color-primary;
@form-color-error: @error-color;
@form-color-warning: @warning-color;
@form-color-success: @success-color;
@form-color-extra: @text-color-placeholder;

// 间距
@form-item-margin-bottom: @comp-margin-xxl;
@form-item-with-help-margin-bottom: @comp-margin-xs;
@form-item-control-height: @comp-margin-xxxl;
@form-item-row-gap: @comp-margin-l;
@form-item-padding-bottom: @comp-paddingTB-xs;
@form-item-margin-right-inline: @comp-margin-xxl;

@form-label-line-height: @text-line-height-base;
@form-label-padding-right: @comp-paddingLR-xl;
@form-label-margin-left-required: @comp-margin-xs;
@form-label-margin-right-required: @comp-margin-xs;
@form-label-margin-colon: 0 @comp-margin-xxs;
@form-status-margin: 0 @comp-margin-s;
@form-status-button-margin: @comp-margin-s;
@form-status-button-width: @comp-size-m;
@from-help-text-margin-top: @comp-margin-xs;
@form-status-icon-size: @comp-size-xxxs;

// status
@input-border-color-success: @success-color;
@input-box-shadow-color-success-focus: @success-color-focus;
@input-border-color-warning: @warning-color;
@input-box-shadow-color-warning-focus: @warning-color-focus;
@input-border-color-error: @error-color;
@input-box-shadow-color-error-focus: @error-color-focus;