tdesign-react/esm/style/web/components/button/_var.less

TDesign Component for React

// 尺寸
@btn-height-s: @comp-size-xs;
@btn-height-default: @comp-size-m;
@btn-height-l: @comp-size-xl;

// 圆角
@btn-border-radius: @border-radius-default;
@btn-shape-border-radius-s: calc(@btn-height-s / 2);
@btn-shape-border-radius-default: calc(@btn-height-default / 2);
@btn-shape-border-radius-l: calc(@btn-height-l / 2);

//字号
@btn-font-s: @font-body-small;
@btn-font-default: @font-body-medium;
@btn-font-l: @font-body-large;

// 图标大小
@btn-icon-size-s: @font-size-base;
@btn-icon-size-default: @font-size-l;
@btn-icon-size-l: @font-size-xl;
@btn-loading-size: @font-size-l;

// 按钮中icon和文字的间距
@btn-icon-text-margin-left: @spacer;

// padding
@btn-padding-horizontal-s: @comp-paddingLR-s;
@btn-padding-horizontal-default: @comp-paddingLR-l;
@btn-padding-horizontal-l: @comp-paddingLR-xl;

@btn-border-width: 1px;

// 状态色 - 主色
@btn-color-primary: @brand-color;
@btn-color-primary-hover: @brand-color-hover;
@btn-color-primary-active: @brand-color-active;
@btn-color-primary-disabled: @brand-color-disabled;

// 状态色 - 成功
@btn-color-success: @success-color;
@btn-color-success-hover: @success-color-hover;
@btn-color-success-active: @success-color-active;
@btn-color-success-disabled: @success-color-disabled;

// 状态色 - 警告
@btn-color-warning: @warning-color;
@btn-color-warning-hover: @warning-color-hover;
@btn-color-warning-active: @warning-color-active;
@btn-color-warning-disabled: @warning-color-disabled;

// 状态色 - 危险
@btn-color-danger: @error-color;
@btn-color-danger-hover: @error-color-hover;
@btn-color-danger-active: @error-color-active;
@btn-color-danger-disabled: @error-color-disabled;

// 状态色 - 白 背景
// input 输入框需要在浅色主题下有默认白色背景，而在暗色等其他主题下 transparent 适配背景色，因此不使用通用背景 token
@btn-color-white-bg: @bg-color-specialcomponent;
@btn-color-white-bg-hover: @bg-color-specialcomponent;
@btn-color-white-bg-active: @bg-color-container-active;
@btn-color-white-bg-disabled: @bg-color-component-disabled;

// 状态色 - 白 ghost
@btn-color-white-ghost: @text-color-anti;
@btn-color-white-ghost-hover: @brand-color-hover;
@btn-color-white-ghost-active: @brand-color-active;
@btn-color-white-ghost-disabled: @border-level-2-color;

// 状态色 - 灰 背景
@btn-color-gray-bg: @bg-color-component;
@btn-color-gray-bg-hover: @bg-color-component-hover;
@btn-color-gray-bg-active: @bg-color-component-active;
@btn-color-gray-bg-disabled: @bg-color-component-disabled;

// 状态色 - 无框背景 - 既文字背景
@btn-color-text-bg: transparent;
@btn-color-text-bg-hover: @bg-color-container-hover;
@btn-color-text-bg-active: @bg-color-container-active;
@btn-color-text-bg-disabled: transparent;

// 状态色 - border 灰
@btn-color-border-gray: @border-level-2-color;
@btn-color-border-gray-hover: @brand-color-hover;
@btn-color-border-gray-active: @brand-color-active;
@btn-color-border-gray-disabled: @border-level-2-color;

// 状态色 - 文字 for 描边
@btn-color-text: @text-color-primary;
@btn-color-text-hover: @brand-color-hover;
@btn-color-text-active: @brand-color-active;
@btn-color-text-disabled: @text-color-disabled;

// 状态色 - 灰字 for base default | 灰色文字按钮
@btn-color-text-gray: @text-color-primary;
@btn-color-text-gray-hover: @text-color-primary;
@btn-color-text-gray-active: @text-color-primary;
@btn-color-text-gray-disabled: @text-color-disabled;

@btn-color-none: transparent;
@btn-color-none-hover: transparent;
@btn-color-none-active: transparent;
@btn-color-none-disabled: transparent;

// 文本
@btn-text-variant-base-color: @text-color-anti;

// 状态色 - disabled ghost
@btn-color-ghost-disabled: rgba(255, 255, 255, .22);