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

Less plugin for Baidu Light DLS.

@import "../global.less";
@import "./button.less";

/* Typography */
@dls-checkbox-font-size-s: @dls-font-size-0;
@dls-checkbox-font-size-m: @dls-font-size-1;

@dls-checkbox-font-color: @dls-foreground-color-neutral;
@dls-checkbox-font-color-disabled: @dls-foreground-color-neutral-disabled;

/* Metrics */
@dls-checkbox-size-s: dls-sum(@dls-checkbox-font-size-s, 2px);
@dls-checkbox-size-m: dls-sum(@dls-checkbox-font-size-m, 2px);

@dls-checkbox-icon-min-size: 8px;
@dls-checkbox-icon-size: 1em;

@dls-checkbox-border-radius: @dls-border-radius-0;

@dls-checkbox-spacing: @dls-padding-unit * 2;

/* Colors */
@dls-checkbox-border-color: @dls-border-color-fillable;
@dls-checkbox-border-color-hover: @dls-border-color-fillable-hover;
@dls-checkbox-border-color-focus: @dls-border-color-focus;
@dls-checkbox-border-color-active: @dls-border-color-fillable-active;
@dls-checkbox-border-color-disabled: @dls-border-color-fillable-disabled;

@dls-checkbox-border-color-checked: @dls-border-color-primary;
@dls-checkbox-border-color-checked-hover: @dls-checkbox-border-color-checked;
@dls-checkbox-border-color-checked-focus: @dls-border-color-focus;
@dls-checkbox-border-color-checked-active: @dls-checkbox-border-color-checked-hover;
@dls-checkbox-border-color-checked-disabled: @dls-border-color-primary-disabled;

@dls-checkbox-background-color: @dls-background-color-fillable;
@dls-checkbox-background-color-hover: @dls-background-color-fillable-hover;
@dls-checkbox-background-color-focus: @dls-checkbox-background-color-hover;
@dls-checkbox-background-color-active: @dls-background-color-fillable-active;
@dls-checkbox-background-color-disabled: @dls-background-color-fillable-disabled;

@dls-checkbox-background-color-checked: @dls-background-color-primary;
@dls-checkbox-background-color-checked-hover: @dls-background-color-primary-hover;
@dls-checkbox-background-color-checked-focus: @dls-checkbox-background-color-checked-hover;
@dls-checkbox-background-color-checked-active: @dls-background-color-primary-active;
@dls-checkbox-background-color-checked-disabled: @dls-background-color-primary-disabled;

@dls-checkbox-foreground-color: @dls-foreground-color-primary-reverse;
@dls-checkbox-foreground-color-hover: @dls-checkbox-foreground-color;
@dls-checkbox-foreground-color-focus: @dls-checkbox-foreground-color-hover;
@dls-checkbox-foreground-color-active: @dls-checkbox-foreground-color-hover;
@dls-checkbox-foreground-color-disabled: @dls-checkbox-foreground-color;

/* Focus ring */
@dls-checkbox-shadow-focus: @dls-shadow-focus;

/* Checkbox group */
@dls-checkbox-group-spacing: @dls-padding-unit * 12;

/* Checkbox triangle mark */
// Use corresponding border color for the triangle
@dls-checkbox-icon-size-strong: @dls-height-unit * 1.5;
@dls-checkbox-icon-spacing-strong: @dls-padding-unit * 0.5;

@dls-checkbox-font-color-strong-checked: @dls-foreground-color-primary;
@dls-checkbox-font-color-strong-checked-disabled: @dls-foreground-color-primary-disabled;

@dls-checkbox-border-color-strong-checked: @dls-border-color-strong;
@dls-checkbox-border-color-strong-checked-disabled: @dls-border-color-strong-disabled;

@dls-checkbox-background-color-strong-checked: @dls-color-brand-1;
@dls-checkbox-background-color-strong-checked-hover: @dls-color-brand-2;
@dls-checkbox-background-color-strong-checked-focus: @dls-checkbox-background-color-strong-checked-hover;
@dls-checkbox-background-color-strong-checked-active: @dls-color-brand-3;
@dls-checkbox-background-color-strong-checked-disabled: @dls-color-brand-1;

@dls-checkbox-line-spacing-strong: @dls-padding-unit * 2;

@dls-checkbox-min-width-strong-stable-s: dls-sum(@dls-button-padding-s * 2, 4em);
@dls-checkbox-min-width-strong-stable-m: dls-sum(@dls-button-padding-m * 2, 4em);

@dls-checkbox-spacing-simple: @dls-padding-unit * 2;