@arco-design/web-react/es/ColorPicker/style/token.less

Arco Design React UI Library.

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

@color-input-size-mini-padding-horizontal: @spacing-2;
@color-input-size-small-padding-horizontal: @spacing-2;
@color-input-size-default-padding-horizontal: @spacing-2;
@color-input-size-large-padding-horizontal: 5px;

@color-preview-size-mini: @size-4;
@color-preview-size-small: 22px;
@color-preview-size-default: @size-6;
@color-preview-size-large: 26px;

@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
@color-input-bg-color-hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@color-value-margin-left: @spacing-3;
@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@color-value-size-mini-font-size: @font-size-body-1;
@color-value-size-small-font-size: @font-size-body-3;
@color-value-size-default-font-size: @font-size-body-3;
@color-value-size-large-font-size: @font-size-body-3;

@color-input-border-radius: @border-radius-small;
@color-preview-border-size: @border-1;
@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-value-font-size: @font-weight-400;

@color-panel-width: 260px;
@color-panel-padding: @spacing-6;
@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-panel-border-radius: @border-radius-small;
@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);

@color-palette-height: 178px;
@color-palette-handle-size: @size-4;
@color-palette-handle-border-size: @border-2;
@color-palette-handle-border-color: var(~'@{arco-cssvars-prefix}-color-bg-white');

@color-control-bar-width: 182px;
@color-control-bar-height: 14px;
@color-control-bar-handle-size: @size-4;
@color-control-bar-handle-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-white');
@color-control-bar-handle-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-control-bar-alpha-margin-top: @spacing-6;
@color-control-bar-gradient-margin: @spacing-6;

@color-panel-input-margin-top: @spacing-6;
@color-panel-input-group-margin-left: @spacing-6;
@color-panel-preview-size: 40px;
@color-panel-format-select-width: 58px;
@color-panel-alpha-input-width: 52px;

@color-panel-section-title-font-size: @font-size-caption;
@color-panel-section-title-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
@color-panel-empty-font-size: @font-size-body-1;
@color-panel-empty-font-color: var(~'@{arco-cssvars-prefix}-color-text-3');

@color-panel-block-size: @size-4;
@color-panel-block-margin: @spacing-3;
@color-panel-block-border-radius: @border-2;