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

@import "../../_variables.less";

// 颜色
@input-border-color-default: @border-level-2-color;
@input-border-color-default-hover: @brand-color;
@input-border-color-default-focus: @brand-color;
@input-border-color-success: @success-color;
@input-border-color-warning: @warning-color;
@input-border-color-error: @error-color;

@input-text-color-success: @success-color;
@input-text-color-warning: @warning-color;
@input-text-color-error: @error-color;

@input-text-color-default: @text-color-primary;
@input-text-color-readonly: @text-color-primary;
@input-text-color-disabled: @text-color-disabled;
@input-text-color-tips: @text-color-placeholder;
@input-placeholder-color: @text-color-placeholder;

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

@input-extra-color-default: @text-color-placeholder;
@input-extra-color-success: @success-color;
@input-extra-color-warning: @warning-color;
@input-extra-color-error: @error-color;

@input-append-color: @bg-color-secondarycontainer-hover;

@input-limit-color: @text-color-placeholder;

// 位置
@input-fix-position: @spacer;

// 间距
@input-padding-l: @comp-paddingTB-m @comp-paddingLR-m;
@input-padding-default: 0 @comp-paddingLR-s;
@input-margin-distance-default: @comp-margin-xxxl;
@input-status-position-right: -24px;
@input-group-first-child-margin-left: -1px;

// 尺寸
@input-height-s: @comp-size-xs;
@input-height-default: @comp-size-m;
@input-height-l: @comp-size-xl;
@input-inner-icon-font-size: inherit;
@input-tips-min-height: @text-line-height-s;

// 图标
@input-inner-prefix-icon-color: @text-color-placeholder;
@input-inner-suffix-icon-color: @text-color-placeholder;
@input-inner-suffix-icon-color-hover: @text-color-secondary;

// 字号
@input-font-l: @font-body-large;
@input-font: @font-body-medium;
@input-font-s: @font-body-small;
@input-extra-font: @font-body-small;
@input-tips-font: @font-body-small;

// 边框
@input-border-radius: @border-radius-default;

// box
@input-box-shadow-color-default-focus: @brand-color-focus;
@input-box-shadow-color-success-focus: @success-color-focus;
@input-box-shadow-color-warning-focus: @warning-color-focus;
@input-box-shadow-color-error-focus: @error-color-focus;
@input-box-shadow-focus: 0 0 0 2px @input-box-shadow-color-default-focus;

// 动画
@input-inner-transition: border @anim-time-fn-easing @anim-duration-base, box-shadow @anim-time-fn-easing @anim-duration-base, background-color @anim-time-fn-easing @anim-duration-base;

// 交互
@input-cursor-readonly: pointer;