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

@datepicker-th-font-color: @text-color-secondary;

@datepicker-panel-width: 280px;
@datepicker-panel-container-min-width: 280px;
@datepicker-panel-select-max-width: 160px;
@datepicker-panel-divider-color: @component-stroke;
@datepicker-time-panel-width: 216px;
@datepicker-time-panel-padding: @pop-padding-xl calc(@pop-padding-xl - @comp-margin-xs);
@datepicker-panel-padding: @pop-padding-xl;
@datepicker-header-gap: @comp-margin-m;
@datepicker-header-controller-gap: @comp-margin-s;
@datepicker-time-header-viewer-size: @comp-size-m;
@datepicker-panel-gap: @comp-margin-m;
@datepicker-year-month-quarter-table-gap: @comp-margin-m;
@datepicker-week-firstcell-margin-left: @comp-margin-xxxl;
@datepicker-cell-start-end-horizontal: calc(@datepicker-cell-inner-margin * 2);
@datepicker-cell-disabled-left: calc(0px - @comp-size-l);
@datepicker-cell-disabled-left-large: calc(0px - @comp-size-xxxl);
@datepicker-year-controller-width: 78px;
@datepicker-month-controller-width: 80px;

@datepicker-cell-min-width: @comp-size-xs;
@datepicker-cell-height: @comp-size-xs;
@datepicker-cell-min-width-l: @comp-size-xxl;
@datepicker-cell-month-year-left: calc(0px - calc(@datepicker-cell-height + @comp-margin-xxl));
@datepicker-cell-inner-margin: calc(@comp-margin-xs - 1px);

@datepicker-th-font-weight: 400;
@datepicker-font-weight-medium: 500;
@datepicker-panel-border-radius: @border-radius-default;

@datepicker-presets-padding: @pop-padding-xl;
@datepicker-presets-gap: @comp-margin-s;

@datepicker-thead-pseudo-line-height: @comp-margin-xs;
@datepicker-time-panel-gap: calc(@datepicker-panel-gap / 2);

// cell
@datepicker-cell-hover-background: @bg-color-container-hover;
@datepicker-cell-active-color: @text-color-anti;
@datepicker-cell-active-background: @brand-color;

@datepicker-cell-disabled-color: @text-color-disabled;
@datepicker-cell-disable-background-color: @bg-color-component-disabled;

@datepicker-now-text-color: @brand-color;
@datepicker-now-background-color: @brand-color-light;

@datepicker-highlight-color: @brand-color-light;
@datepicker-hover-highlight-color: rgba(0, 0, 0, .06); // 此处亮色暗色通用，无token
@datepicker-presets-min-width: @comp-size-xl;
@datepicker-presets-text-color: @brand-color;
@datepicker-presets-text-color-hover: @brand-color-hover;

// ani
@datepicker-transition: box-shadow @anim-duration-base @anim-time-fn-easing, background-color @anim-duration-base linear, border-color @anim-duration-base linear, color @anim-duration-base linear;