tdesign-mobile-vue/esm/_common/style/mobile/components/button/_var.less

tdesign-mobile-vue

// 尺寸
@btn-height-s: 36px;
@btn-line-height-s: 22px;
@btn-height-default: 40px;
@btn-line-height-default: 22px;
@btn-height-l: 44px;
@btn-line-height-l: 24px;
// @btn-height-block: 44px;

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

// 阴影
@btn-bg-color-container: transparent;
//字号
@btn-font-large: @font-size-l;
@btn-font-default: @font-size-base;
@btn-font-small: @font-size-base;
// 图标大小
// @btn-icon-size: 22px;
@btn-loading-size: calc(@font-size * 1.4);

// 图标大小
@btn-icon-size-small: 20px;
@btn-icon-size-default: 22px;
@btn-icon-size-large: 24px;

// padding
@btn-padding-horizontal: 16px;

@btn-border-width: 1px;

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

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

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

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

// 状态色 - 白 背景
@btn-color-white-bg: @btn-bg-color-container;
@btn-color-white-bg-active: @bg-color-component-active;
@btn-color-white-bg-disabled: @bg-color-component-disabled;

// 状态色 - 白 ghost
@btn-color-white-ghost: @bg-color-container;
@btn-color-white-ghost-active: @bg-color-container-active;
@btn-color-white-ghost-disabled: @component-border;

// 状态色 - 灰 背景
@btn-color-gray-bg: @bg-color-component;
@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-active: @bg-color-container-active;
@btn-color-text-bg-disabled: transparent;

// 状态色 - border 灰
@btn-color-border-gray: @component-border;
@btn-color-border-gray-active: @component-border;
@btn-color-border-gray-disabled: @component-border;

// 状态色 - 文字 for 描边
@btn-color-text: @text-color-primary;
@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-active: @text-color-primary;
@btn-color-text-gray-disabled: @text-color-disabled;

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

@btn-text-variant-base-color: @text-color-anti;