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

@radio-cls: ~"@{prefix}-radio";
@radio-button--cls: ~"@{prefix}-radio-button";

// 颜色
@radio-border-color: @border-level-2-color;

@radio-input-color: @bg-color-container;
@radio-input-color-disabled: @bg-color-component-disabled;

@radio-dot-color: @brand-color;
@radio-dot-color-disabled: @bg-color-component-disabled;
@radio-dot-color-disabled-checked: @text-color-disabled;

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

@radio-button-border-color-default: @border-level-2-color;
@radio-button-border-color-hover: @brand-color-hover;
@radio-button-color-outline-hover: @brand-color-hover;
@radio-button-border-color-checked: @brand-color;
@radio-button-color-outline-checked: @brand-color;
@radio-button-background-color-disabled: @bg-color-component-disabled;
@radio-button-color-disabled: @text-color-disabled;
@radio-button-background-color-outline-disabled-checked: @bg-color-specialcomponent;
@radio-button-color-disabled-checked: @text-color-disabled;

@radio-button-group-background-color-filled: @bg-color-component;
@radio-button-color-filled: @text-color-secondary;
@radio-button-color-filled-hover: @text-color-primary;
@radio-button-color-default-filled-checked: @text-color-primary;
@radio-button-color-primary-filled-checked: @text-color-anti;
@radio-button-color-default-filled-disabled-checked: @text-color-disabled;
@radio-button-background-color-default-filled-checked: @bg-color-container-select;
@radio-button-background-color-primary-filled-checked: @brand-color;
@radio-button-background-color-default-filled-disabled-checked: @bg-color-component-disabled;
@radio-button-background-color-primary-filled-disabled-checked: @brand-color-disabled;

// 尺寸
@radio-size: 16px;
@radio-dot-size: (@radio-size / 2);
@radio-margin-right: @comp-margin-xxl;
@radio-button-border-radius: @border-radius-small;
@radio-outline-height-small: @comp-size-xs;
@radio-outline-height-medium: @comp-size-m;
@radio-outline-height-large: @comp-size-xl;
@radio-height-small: calc(@comp-size-xs - (@comp-paddingTB-xxs * 2));
@radio-height-medium: calc(@comp-size-m - (@comp-paddingTB-xxs * 2));
@radio-height-large: calc(@comp-size-xl - (@comp-paddingTB-xxs * 2));
@radio-button-before-width: 1px;

// 字号
@radio-font: @font-body-medium;
@radio-button-font-small: @font-body-small;
@radio-button-font-medium: @font-body-medium;
@radio-button-font-large: @font-body-large;

// padding
@radio-input-label-spacer: @comp-margin-s;
@radio-button-padding-small: 0px @comp-paddingLR-s;
@radio-button-padding-medium: @comp-paddingTB-xs @comp-paddingLR-l;
@radio-button-padding-large: @comp-paddingTB-s @comp-paddingLR-xl;
@radio-button-before-left: 0px;
@radio-button-before-top: 50%;
@radio-button-border: 1px solid;

@radio-group-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
@radio-group-filled-bg-block-left: 2px;
@radio-group-filled-bg-block-top: 2px;

// 动画&过度
@radio-group-transition: all @anim-duration-base @anim-time-fn-easing;
@radio-button-before-transition: translateY(-50%);
@radio-button-transition: color @anim-duration-base @anim-time-fn-ease-out;
@radio-input-transition: border @anim-duration-base @anim-time-fn-ease-out;
// 透明度
@radio-opacity-transparent: 0; // 全透明

// 边框
@radio-input-border: 1px solid @radio-border-color;