tdesign-react
Version:
TDesign Component for React
49 lines (39 loc) • 1.62 kB
text/less
// 组件变量
// 名称可按如下规则定义：
// <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
// 颜色
@msg-primary-color: @brand-color;
@msg-warning-color: @warning-color;
@msg-success-color: @success-color;
@msg-error-color: @error-color;
@msg-close-icon-color: @text-color-secondary;
@msg-color-block: @bg-color-container;
@msg-color-border: @border-level-2-color;
@msg-color-text: @text-color-primary;
@msg-close-bg-color-hover: @bg-color-container-hover;
@msg-close-bg-color-active: @bg-color-container-active;
// 尺寸
@msg-icon-size: calc(@font-size-base + 6px);
@msg-close-size: calc(@font-size-base + 2px);
@msg-border-width: 1px;
// 圆角
@msg-border-radius: @border-radius-medium;
// 阴影
@msg-shadow: @shadow-3-inset;
//字号
@msg-font-default: @font-body-medium;
// 间距
@msg-padding-horizontal-default: @comp-paddingLR-l;
@msg-padding-vertical-default: @comp-paddingTB-m;
@msg-icon-margin-right: @comp-margin-s;
@msg-close-icon-margin-left: @comp-margin-xxl;
@msg-list-margin-bottom: @comp-margin-s;
// Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中
@msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading";