@bee-design/ui/es/Input/style/token.less

Bee Design React UI Library.

@import '../../style/theme/default.less';

/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{bee-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{bee-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{bee-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{bee-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{bee-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{bee-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{bee-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{bee-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{bee-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{bee-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{bee-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{bee-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{bee-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{bee-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-2;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{bee-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{bee-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{bee-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{bee-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{bee-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{bee-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{bee-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{bee-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{bee-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/