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

@checkbox-cls: ~"@{prefix}-checkbox";

// 颜色
@checkbox-border-color: @border-level-2-color;
@checkbox-border-color-checked: @brand-color;
@checkbox-border-color-hover: @brand-color;

@checkbox-input-color: @bg-color-container;
@checkbox-input-color-checked: @brand-color;
@checkbox-input-color-disabled: @bg-color-component-disabled;

@checkbox-check-color: @text-color-anti;
@checkbox-check-color-disabled: @text-color-disabled;
// 图标禁止选中状态下时icon的色值变量
@checkbox-check-icon-disabled-color: @text-color-disabled;

@checkbox-input-color-indeterminate: @brand-color;
@checkbox-indeterminate-color-disabled: @text-color-disabled;

@checkbox-label-color: @text-color-primary;

// 尺寸
@checkbox-size: 16px;
@checkbox-border-radius: @border-radius-default;
@checkbox-margin-right: @comp-margin-s;

@checkbox-check-width: 5px;
@checkbox-check-height: 9px;
@checkbox-check-size: (
  (@checkbox-check-width + @checkbox-check-height) / sqrt(2)
);
@checkbox-check-left: 3px;

@checkbox-indeterminate-width: 16px;
@checkbox-indeterminate-height: 4px;
@checkbox-indeterminate-color: @font-white-1;

// 字号
@checkbox-font: @font-body-medium;

// padding
@checkbox-input-label-spacer: @spacer;

// 组合复选框margin
@checkbox-group-gap: @spacer-2;
// 单个复选框margin
@checkbox-margin: inherit;