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

// color
@alert-success-bg-color: @success-color-focus;
@alert-info-bg-color: @brand-color-focus;
@alert-warning-bg-color: @warning-color-focus;
@alert-error-bg-color: @error-color-focus;
@alert-title-color: @text-color-primary;
@alert-description-color: @text-color-secondary;

@alert-success-icon-color: @success-color;
@alert-info-icon-color: @brand-color;
@alert-warning-icon-color: @warning-color;
@alert-error-icon-color: @error-color;

@alert-close-color: @text-color-secondary;
@alert-close-color-hover: @text-color-primary;

@alert-success-trigger-color: @success-color-focus;
@alert-info-trigger-color: @brand-color;
@alert-warning-trigger-color: @warning-color-focus;
@alert-error-trigger-color: @error-color-focus;

@alert-success-trigger-active-color: @success-color;
@alert-info-trigger-active-color: @brand-color;
@alert-warning-trigger-active-color: @warning-color;
@alert-error-trigger-active-color: @error-color;

// size
@alert-font-size: @font-size-base;
@alert-line-height: @text-line-height-base;
@alert-icon-size: @alert-line-height;
@alert-close-size: calc(@alert-line-height - 2px);

// 间距
@alert-padding: @comp-paddingTB-l @comp-paddingLR-xl;
@alert-operation-padding: 0 @comp-paddingLR-s;
@alert-margin-left: @comp-margin-s;
@alert-close-margin-left: @comp-margin-l;
@alert-close-padding: calc((@alert-line-height - @alert-close-size) / 2 ) 0;
@alert-description-margin-top: @comp-margin-s;
@alert-collapse-margin-top: @comp-margin-s;