less-plugin-dls/tokens/components/steps.less

Less plugin for Baidu Light DLS.

@import "../global.less";

/* Typography */
@dls-steps-title-font-size-s: @dls-font-size-0;
@dls-steps-title-font-size-m: @dls-font-size-1;
@dls-steps-desc-font-size-s: @dls-font-size-0;
@dls-steps-desc-font-size-m: @dls-font-size-0;
@dls-steps-marker-font-size-s: @dls-font-size-2;
@dls-steps-marker-font-size-m: @dls-font-size-2;
@dls-steps-title-font-weight: @dls-font-weight-2;

@dls-steps-title-font-color: @dls-foreground-color-neutral;
@dls-steps-title-font-color-hover: @dls-steps-title-font-color;
@dls-steps-title-font-color-focus: @dls-steps-title-font-color-hover;
@dls-steps-title-font-color-active: @dls-steps-title-font-color-hover;
@dls-steps-desc-font-color: @dls-foreground-color-neutral-weak;

// Incomplete
@dls-steps-title-font-color-incomplete: @dls-foreground-color-neutral-weak;
@dls-steps-desc-font-color-incomplete: @dls-foreground-color-neutral-weak;

/* Markers */
@dls-steps-marker-size-s: @dls-height-unit * 7;
@dls-steps-marker-size-m: @dls-height-unit * 7;
@dls-steps-marker-size-dot-s: @dls-height-unit * 2.5;
@dls-steps-marker-size-dot-m: @dls-height-unit * 2.5;
@dls-steps-marker-ring-width-dot-s: @dls-height-unit * 0.5;
@dls-steps-marker-ring-width-dot-m: @dls-height-unit * 0.5;
@dls-steps-marker-icon-size: @dls-font-size-2;

/* Metrics */
@dls-steps-title-max-width: 10em;
@dls-steps-desc-max-width: 12em;

/* Spacing */
@dls-steps-marker-spacing: @dls-padding-unit * 2;
@dls-steps-title-spacing: @dls-padding-unit * 1;
@dls-steps-connector-spacing-horizontal: @dls-padding-unit * 2;
@dls-steps-connector-spacing-vertical: @dls-padding-unit * 2;

@dls-steps-connector-min-length: @dls-padding-unit * 10;

/* Statuses */
// Incomplete
@dls-steps-marker-background-color-incomplete: @dls-background-color-neutral;
@dls-steps-marker-background-color-incomplete-hover: @dls-background-color-neutral-hover;
@dls-steps-marker-background-color-incomplete-focus: @dls-steps-marker-background-color-incomplete-hover;
@dls-steps-marker-background-color-incomplete-active: @dls-background-color-neutral-active;
@dls-steps-marker-border-color-incomplete: transparent;

@dls-steps-marker-background-color-dot-incomplete: @dls-background-color-neutral-primary;
@dls-steps-marker-background-color-dot-incomplete-hover: @dls-background-color-neutral-primary-hover;
@dls-steps-marker-background-color-dot-incomplete-focus: @dls-steps-marker-background-color-dot-incomplete-hover;
@dls-steps-marker-background-color-dot-incomplete-active: @dls-background-color-neutral-primary-active;
@dls-steps-marker-border-color-dot-incomplete: transparent;

@dls-steps-marker-foreground-color-incomplete: @dls-foreground-color-neutral-weak;
@dls-steps-connector-color-incomplete: @dls-line-color-2;

// Completed
@dls-steps-marker-background-color-completed: @dls-background-color-info;
@dls-steps-marker-background-color-completed-hover: @dls-background-color-info-hover;
@dls-steps-marker-background-color-completed-focus: @dls-steps-marker-background-color-completed-hover;
@dls-steps-marker-background-color-completed-active: @dls-background-color-info-active;
@dls-steps-marker-border-color-completed: transparent;

@dls-steps-marker-background-color-dot-completed: @dls-background-color-primary;
@dls-steps-marker-background-color-dot-completed-hover: @dls-background-color-primary-hover;
@dls-steps-marker-background-color-dot-completed-focus: @dls-steps-marker-background-color-dot-completed-hover;
@dls-steps-marker-background-color-dot-completed-active: @dls-background-color-primary-active;
@dls-steps-marker-border-color-dot-completed: transparent;

@dls-steps-marker-foreground-color-completed: @dls-foreground-color-primary;
@dls-steps-connector-color-completed: @dls-border-color-strong;

// Error
@dls-steps-marker-background-color-error: @dls-background-color-error;
@dls-steps-marker-background-color-error-hover: @dls-background-color-error-hover;
@dls-steps-marker-background-color-error-focus: @dls-steps-marker-background-color-error-hover;
@dls-steps-marker-background-color-error-active: @dls-background-color-error-active;
@dls-steps-marker-border-color-error: transparent;

@dls-steps-marker-background-color-dot-error: @dls-background-color-error-primary;
@dls-steps-marker-background-color-dot-error-hover: @dls-background-color-error-primary-hover;
@dls-steps-marker-background-color-dot-error-focus: @dls-steps-marker-background-color-dot-error-hover;
@dls-steps-marker-background-color-dot-error-active: @dls-background-color-error-primary-active;
@dls-steps-marker-border-color-dot-error: transparent;

@dls-steps-marker-foreground-color-error: @dls-foreground-color-error-primary;
@dls-steps-connector-color-error: @dls-border-color-error-strong;

// Current
@dls-steps-marker-background-color-current: @dls-background-color-primary;
@dls-steps-marker-background-color-current-hover: @dls-background-color-primary-hover;
@dls-steps-marker-background-color-current-focus: @dls-steps-marker-background-color-current-hover;
@dls-steps-marker-background-color-current-active: @dls-background-color-primary-active;
@dls-steps-marker-border-color-current: @dls-border-color-primary;

@dls-steps-marker-background-color-dot-current: @dls-background-color-primary;
@dls-steps-marker-background-color-dot-current-hover: @dls-background-color-primary-hover;
@dls-steps-marker-background-color-dot-current-focus: @dls-steps-marker-background-color-dot-current-hover;
@dls-steps-marker-background-color-dot-current-active: @dls-background-color-primary-active;
@dls-steps-marker-border-color-dot-current: @dls-border-color-primary;

@dls-steps-marker-foreground-color-current: @dls-foreground-color-primary-reverse;
@dls-steps-connector-color-current: @dls-border-color-strong;

// Error & current
@dls-steps-marker-background-color-error-current: @dls-background-color-error-primary;
@dls-steps-marker-background-color-error-current-hover: @dls-background-color-error-primary-hover;
@dls-steps-marker-background-color-error-current-focus: @dls-steps-marker-background-color-error-current-hover;
@dls-steps-marker-background-color-error-current-active: @dls-background-color-error-primary-active;
@dls-steps-marker-border-color-error-current: @dls-border-color-error-primary;

@dls-steps-marker-background-color-dot-error-current: @dls-background-color-error-primary;
@dls-steps-marker-background-color-dot-error-current-hover: @dls-background-color-error-primary-hover;
@dls-steps-marker-background-color-dot-error-current-focus: @dls-steps-marker-background-color-dot-error-current-hover;
@dls-steps-marker-background-color-dot-error-current-active: @dls-background-color-error-primary-active;
@dls-steps-marker-border-color-dot-error-current: @dls-border-color-error-primary;

@dls-steps-marker-foreground-color-error-current: @dls-foreground-color-reverse;
@dls-steps-connector-color-error-current: @dls-border-color-error-strong;

// Stateless
@dls-steps-marker-background-color-stateless: @dls-steps-marker-background-color-completed;
@dls-steps-marker-border-color-stateless: @dls-steps-marker-border-color-completed;

@dls-steps-marker-background-color-dot-stateless: @dls-steps-marker-background-color-dot-completed;
@dls-steps-marker-border-color-dot-stateless: @dls-steps-marker-border-color-dot-completed;

@dls-steps-marker-foreground-color-stateless: @dls-foreground-color-info-primary;
@dls-steps-connector-color-stateless: @dls-line-color-2;

// Focus ring
@dls-steps-marker-border-color-focus: @dls-border-color-focus;
@dls-steps-marker-border-color-error-focus: @dls-border-color-error-focus;
@dls-steps-marker-shadow-focus: @dls-shadow-focus;
@dls-steps-marker-shadow-error-focus: @dls-shadow-error-focus;