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

Less plugin for Baidu Light DLS.

@import "../global.less";

/* Font sizes */
@dls-button-font-size-xs: @dls-font-size-0;
@dls-button-font-size-s: @dls-font-size-0;
@dls-button-font-size-m: @dls-font-size-1;
@dls-button-font-size-l: @dls-font-size-2;
@dls-button-font-size-xl: @dls-font-size-2;

/* Metrics */
@dls-button-height-xs: @dls-height-unit * 6;
@dls-button-height-s: @dls-height-unit * 7;
@dls-button-height-m: @dls-height-unit * 8;
@dls-button-height-l: @dls-height-unit * 9;
@dls-button-height-xl: @dls-height-unit * 10;

@dls-button-padding-xs: @dls-padding-unit * 2;
@dls-button-padding-s: @dls-padding-unit * 3;
@dls-button-padding-m: @dls-padding-unit * 4;
@dls-button-padding-l: @dls-padding-unit * 5;
@dls-button-padding-xl: @dls-padding-unit * 5;

@dls-button-border-radius-xs: @dls-border-radius-0;
@dls-button-border-radius-s: @dls-border-radius-0;
@dls-button-border-radius-m: @dls-border-radius-1;
@dls-button-border-radius-l: @dls-border-radius-2;
@dls-button-border-radius-xl: @dls-border-radius-2;

@dls-button-content-spacing: @dls-padding-unit * 1;

/* Stylistic variants */
// normal
@dls-button-font-color-normal: @dls-foreground-color-neutral;
@dls-button-font-color-normal-disabled: @dls-foreground-color-neutral-disabled;

@dls-button-border-color-normal: transparent;
@dls-button-border-color-normal-hover: @dls-button-border-color-normal;
@dls-button-border-color-normal-active: @dls-button-border-color-normal-hover;
@dls-button-border-color-normal-disabled: @dls-button-border-color-normal;

@dls-button-background-color-normal: @dls-background-color-neutral;
@dls-button-background-color-normal-hover: @dls-background-color-neutral-hover;
@dls-button-background-color-normal-focus: @dls-button-background-color-normal-hover;
@dls-button-background-color-normal-active: @dls-background-color-neutral-active;
@dls-button-background-color-normal-disabled: @dls-background-color-neutral-disabled;

// basic
@dls-button-font-color-basic: @dls-foreground-color-neutral;
@dls-button-font-color-basic-disabled: @dls-foreground-color-neutral-disabled;

@dls-button-border-color-basic: @dls-border-color-pressable;
@dls-button-border-color-basic-hover: @dls-border-color-pressable-hover;
@dls-button-border-color-basic-active: @dls-border-color-pressable-active;
@dls-button-border-color-basic-disabled: @dls-border-color-pressable-disabled;

@dls-button-background-color-basic: @dls-background-color-pressable;
@dls-button-background-color-basic-hover: @dls-background-color-pressable-hover;
@dls-button-background-color-basic-focus: @dls-button-background-color-basic-hover;
@dls-button-background-color-basic-active: @dls-background-color-pressable-active;
@dls-button-background-color-basic-disabled: @dls-background-color-pressable-disabled;

// strong
@dls-button-font-color-strong: @dls-foreground-color-primary;
@dls-button-font-color-strong-disabled: @dls-foreground-color-primary-disabled;

@dls-button-border-color-strong: @dls-border-color-strong;
@dls-button-border-color-strong-hover: @dls-button-border-color-strong;
@dls-button-border-color-strong-active: @dls-button-border-color-strong-hover;
@dls-button-border-color-strong-disabled: @dls-border-color-strong-disabled;

@dls-button-background-color-strong: @dls-background-color-strong;
@dls-button-background-color-strong-hover: @dls-background-color-strong-hover;
@dls-button-background-color-strong-focus: @dls-button-background-color-strong-hover;
@dls-button-background-color-strong-active: @dls-background-color-strong-active;
@dls-button-background-color-strong-disabled: @dls-background-color-strong-disabled;

// primary
@dls-button-font-color-primary: @dls-foreground-color-primary-reverse;
@dls-button-font-color-primary-disabled: @dls-button-font-color-primary;

@dls-button-border-color-primary: transparent;
@dls-button-border-color-primary-hover: @dls-button-border-color-primary;
@dls-button-border-color-primary-active: @dls-button-border-color-primary-hover;
@dls-button-border-color-primary-disabled: @dls-button-border-color-primary;

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

// translucent
@dls-button-font-color-translucent: @dls-foreground-color-reverse;
@dls-button-font-color-translucent-disabled: fade(@dls-foreground-color-reverse, 60%);

@dls-button-border-color-translucent: transparent;
@dls-button-border-color-translucent-hover: @dls-button-border-color-translucent;
@dls-button-border-color-translucent-active: @dls-button-border-color-translucent-hover;
@dls-button-border-color-translucent-disabled: @dls-button-border-color-translucent;

@dls-button-background-color-translucent: @dls-background-color-translucent;
@dls-button-background-color-translucent-hover: @dls-background-color-translucent-hover;
@dls-button-background-color-translucent-focus: @dls-button-background-color-translucent-hover;
@dls-button-background-color-translucent-active: @dls-background-color-translucent-active;
@dls-button-background-color-translucent-disabled: @dls-background-color-translucent-disabled;

// text buttons
@dls-button-font-color-text: @dls-foreground-color-neutral;
@dls-button-font-color-text-hover: @dls-foreground-color-neutral-hover;
@dls-button-font-color-text-focus: @dls-button-font-color-text;
@dls-button-font-color-text-active: @dls-foreground-color-neutral-active;
@dls-button-font-color-text-disabled: @dls-foreground-color-neutral-disabled;

@dls-button-font-color-text-strong: @dls-foreground-color-primary;
@dls-button-font-color-text-strong-hover: @dls-foreground-color-primary-hover;
@dls-button-font-color-text-strong-focus: @dls-button-font-color-text-strong;
@dls-button-font-color-text-strong-active: @dls-foreground-color-primary-active;
@dls-button-font-color-text-strong-disabled: @dls-foreground-color-primary-disabled;

@dls-button-font-color-text-aux: @dls-foreground-color-neutral-weak;
@dls-button-font-color-text-aux-hover: @dls-foreground-color-neutral-weak-hover;
@dls-button-font-color-text-aux-focus: @dls-button-font-color-text-aux;
@dls-button-font-color-text-aux-active: @dls-foreground-color-neutral-weak-active;
@dls-button-font-color-text-aux-disabled: @dls-foreground-color-neutral-weak-disabled;

@dls-button-background-color-text: transparent;
@dls-button-background-color-text-hover: @dls-button-background-color-text;
@dls-button-background-color-text-focus: @dls-button-background-color-text-hover;
@dls-button-background-color-text-active: @dls-button-background-color-text;
@dls-button-background-color-text-disabled: @dls-button-background-color-text;

@dls-button-padding-text: @dls-padding-unit * 0.5;

/* Checked variant */
@dls-button-background-color-checked: @dls-background-color-current;
@dls-button-background-color-checked-hover: @dls-background-color-current-hover;
@dls-button-background-color-checked-focus: @dls-button-background-color-checked-hover;
@dls-button-background-color-checked-active: @dls-background-color-current-active;
@dls-button-background-color-checked-disabled: @dls-background-color-current-disabled;

@dls-button-border-color-checked: @dls-border-color-current;
@dls-button-border-color-checked-disabled: @dls-border-color-current-disabled;

@dls-button-foreground-color-checked: @dls-foreground-color-primary;

/* Focus rings */
@dls-button-border-color-focus: @dls-border-color-focus;
@dls-button-shadow-focus: @dls-shadow-focus;

/* Button group separator */
@dls-button-group-separator-opacity: 0.15;