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

@color-picker-panel-width: 256px;
@color-picker-panel-padding: @pop-padding-xl;
@color-picker-panel-radius: @border-radius-medium;
@color-picker-icon-radius: @border-radius-default;
@color-picker-saturation-height: 160px;
@color-picker-saturation-radius: @border-radius-default;
@color-picker-saturation-thumb-size: calc(@comp-size-xxxs + @size-1);
@color-picker-margin: @comp-margin-m;
@color-picker-slider-height: 8px;
@color-picker-slider-wrapper-radius: calc(@color-picker-slider-height / 2);
@color-picker-slider-wrapper-padding: 0 calc(@color-picker-saturation-thumb-size / 2);
@color-picker-slider-thumb-size: calc(@comp-size-xxxs + @size-1);
@color-picker-slider-thumb-transform-x: calc(@color-picker-slider-thumb-size * -.5);
@color-picker-slider-thumb-padding: 2px;
@color-picker-input-format-margin-left: @comp-margin-s;
@color-picker-select-format-margin-right: @comp-margin-xs;
@color-picker-select-format-width: 72px;
@color-picker-font: @font-body-small;
@color-picker-icon-radius: @border-radius-default;
@color-picker-icon-font-size: @color-picker-swatch-icon-size;
@color-picker-degree-width: @comp-size-xxl;
@color-picker-gradient-preview-width: @comp-size-s;
@color-picker-gradient-preview-height: @comp-size-s;
@color-picker-gradient-preview-radius: @border-radius-default;
@color-picker-swatch-icon-size: @comp-size-xxxs;
@color-picker-swatch-action-margin-left: @comp-margin-s;
@color-picker-swatch-width: @comp-size-xxxs;
@color-picker-swatch-height: @comp-size-xxxs;
@color-picker-swatch-radius: @border-radius-circle;
@color-picker-swatch-padding: 0;
@color-picker-swatch-border-size: 1px;
@color-picker-swatch-columns: 10;
@color-picker-swatch-item-padding: calc(@color-picker-panel-padding - 8px); //make sure swatchItem scale
@color-picker-swatch-item-left-negative-padding: calc(0px - @color-picker-swatch-item-padding);
// columnGap = (panelWidth - (panelPadding * 2) + (swatchColor * columnsItem)) / 9
@color-picker-swatch-row-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-height * @color-picker-swatch-columns))) / 9);
@color-picker-swatch-column-gap: calc(calc(@color-picker-panel-width - calc(calc(@color-picker-panel-padding * 2) + calc(@color-picker-swatch-width * @color-picker-swatch-columns))) / 9);
@color-picker-swatch-wrap-margin-left: (@color-picker-swatch-padding + @color-picker-swatch-border-size) * -1;
// 右边往外伸出一点，让滚动条居外侧
@color-picker-swatch-wrap-margin-right: @color-picker-swatch-wrap-margin-left -
  10px;
@color-picker-swatch-wrap-margin: 0 @color-picker-swatch-wrap-margin-right 0
  @color-picker-swatch-wrap-margin-left;
@color-picker-swatch-max-rows: 4; // 最大显示行数

// shadow
@color-picker-panel-shadow: @shadow-2-inset;
@color-picker-thumbs-shadow: @shadow-1;
@colot-picker-swatch-item-color-inset-shadow: @shadow-inset;

// 最大高度 = 行数 * (itemHeight + itemMarginTop)m;
@color-picker-swatch-rows-max-height: calc(@color-picker-swatch-max-rows *
calc(@color-picker-swatch-height + @color-picker-swatch-row-gap));

// trigger-input
@color-picker-trigger-input-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs;
@color-picker-trigger-input-color-inner-size: calc(@comp-size-xs - 2px);
@color-picker-trigger-input-color-inner-size-s: calc(@comp-size-xxs - 2px);
@color-picker-trigger-input-color-inner-size-l: calc(@comp-size-s - 2px);