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

// 颜色
// 进度条背景色值(未完成部分进度)
@progress-track-color: @bg-color-component;
// 进度条已完成进度色值(默认状态)
@progress-inner-color: @brand-color;
// 进度条已完成进度色值(成功状态)
@progress-success: @success-color;
@progress-error: @error-color;
@progress-warning: @warning-color;
// 进度条已完成进度色值(active状态)
@progress-inner-bg-color-active: @text-color-anti;
// 进度条深色label字体颜色(在进度条外或未完成进度灰色色块里显示的色值)
@progress-info-dark-color: @text-color-primary;
// 进度条浅色label字体颜色(在进度条色块内显示的色值)
@progress-info-light-color: @text-color-anti;
@progress-circle-info-color: @text-color-primary;

// 尺寸
// line 进度条线宽
@progress-line-stroke-width: @size-3;
// plump 进度条线宽
@progress-stroke-plump-width: @comp-size-xxs;

// 字体
@progress-icon-font-size: calc(@font-size-base + 2px);
@progress-icon-circle-font-size: 2.4em;
@progress-plump-font-size: @font-size-s;
@progress-circle-font-size: inherit;
@progress-circle-font-weight: 500;

// 间距
@progress-info-spacer: @comp-margin-s;

@progress-inner-border-radius: 50px;

@progress-inner-transition: all @anim-duration-base @anim-time-fn-easing;