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

// 颜色
@notification-close-icon-color: @text-color-secondary;
@notification-color-block: @bg-color-container;
@notification-title-color: @text-color-primary;
@notification-content-color: @text-color-secondary;
@notification-detail-item-color-hover: inherit;
@notification-detail-item-bg-color-hover: @bg-color-container-hover;
@notification-detail-item-color-active: inherit;
@notification-detail-item-bg-color-active: @bg-color-container-active;
@notification-detail-item-is-active-color: @brand-color;
@notification-icon-info-color: @brand-color;
@notification-icon-success-color: @success-color;
@notification-icon-warning-color: @warning-color;
@notification-icon-error-color: @error-color-6;
@notification-detail-item-color: inherit;
@notification-close-bg-color-hover: @bg-color-container-hover;
@notification-close-bg-color-active: @bg-color-container-active;

// 尺寸
@notification-width-default: 360px;
@notification-content-max-height: 66px;
@notification-icon-width: calc(@font-size-l + 8px);
@notification-icon-font-size: calc(@font-size-l + 8px);
@notification-icon-close-font-size: @font-size-l;

// 圆角
@notification-detail-item-border-radius: @border-radius-medium;
@notification-close-border-radius: @border-radius-medium;

// 阴影
@notification-shadow: @shadow-2-inset;

//字号
@notification-font: @font-body-medium;
@notification-detail-font: @font-body-medium;
@notification-content-font: @font-body-medium;
@notification-title-font: @font-title-medium;

// padding
@notification-padding-default: @comp-paddingTB-l @comp-paddingLR-l;

//margin
@notification-detail-margin-top: @comp-margin-l;
@notification-content-margin-top: @comp-margin-s;
@notification-icon-margin-right: @comp-margin-s;
@notification-detail-item-margin-left: @comp-margin-s;