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-xs;
@dls-button-height-s: @dls-height-s;
@dls-button-height-m: @dls-height-m;
@dls-button-height-l: @dls-height-l;
@dls-button-height-xl: @dls-height-xl;

@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-1;
@dls-button-border-radius-s: @dls-border-radius-1;
@dls-button-border-radius-m: @dls-border-radius-1;
@dls-button-border-radius-l: @dls-border-radius-1;
@dls-button-border-radius-xl: @dls-border-radius-1;

@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: @dls-border-color-primary;
@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-border-color-primary-disabled;

@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: @dls-border-color-translucent;
@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-border-color-translucent-disabled;

@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-font-color-text-subtle: @dls-foreground-color-neutral-subtle;
@dls-button-font-color-text-subtle-hover: @dls-foreground-color-neutral-subtle-hover;
@dls-button-font-color-text-subtle-focus: @dls-button-font-color-text-subtle;
@dls-button-font-color-text-subtle-active: @dls-foreground-color-neutral-subtle-active;
@dls-button-font-color-text-subtle-disabled: @dls-foreground-color-neutral-subtle-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;

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

@dls-button-border-color-ghost: transparent;
@dls-button-border-color-ghost-disabled: transparent;

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

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

@dls-button-border-color-ghost-strong: transparent;
@dls-button-border-color-ghost-strong-disabled: transparent;

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

// aux ghost buttons
@dls-button-font-color-ghost-aux: @dls-foreground-color-neutral-weak;
@dls-button-font-color-ghost-aux-disabled: @dls-foreground-color-neutral-weak-disabled;

@dls-button-border-color-ghost-aux: transparent;
@dls-button-border-color-ghost-aux-disabled: transparent;

@dls-button-background-color-ghost-aux: transparent;
@dls-button-background-color-ghost-aux-hover: @dls-background-color-pressable-hover;
@dls-button-background-color-ghost-aux-focus: @dls-button-background-color-ghost-aux-hover;
@dls-button-background-color-ghost-aux-active: @dls-background-color-pressable-active;
@dls-button-background-color-ghost-aux-disabled: transparent;

// reverse ghost buttons
@dls-button-font-color-ghost-reverse: @dls-foreground-color-reverse;
@dls-button-font-color-ghost-reverse-disabled: fade(@dls-button-font-color-ghost-reverse, 50%);

@dls-button-border-color-ghost-reverse: transparent;
@dls-button-border-color-ghost-reverse-disabled: transparent;

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

/* 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;

/* Selectable button group */
@dls-button-font-color-selected: @dls-foreground-color-primary;
@dls-button-font-color-selected-disabled: @dls-foreground-color-primary-disabled;

@dls-button-border-color-selected: @dls-border-color-strong;
@dls-button-border-color-selected-disabled: @dls-border-color-strong-disabled;

@dls-button-background-color-selected: @dls-color-brand-1;
@dls-button-background-color-selected-hover: @dls-color-brand-2;
@dls-button-background-color-selected-focus: @dls-button-background-color-selected-hover;
@dls-button-background-color-selected-active: @dls-color-brand-3;
@dls-button-background-color-selected-disabled: @dls-color-brand-1;

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