birdpaper-ui/lib/button/src/style/token.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

@btn-size-mini-font-size: 12px;
@btn-size-small-font-size: 12px;
@btn-size-normal-font-size: 14px;
@btn-size-large-font-size: 16px;

@btn-mini-square-width: auto;
@btn-mini-round-width: auto;
@btn-mini-circle-width: 22px;
@btn-small-square-width: auto;
@btn-small-round-width: auto;
@btn-small-circle-width: 28px;
@btn-normal-square-width: auto;
@btn-normal-round-width: auto;
@btn-normal-circle-width: 32px;
@btn-large-square-width: auto;
@btn-large-round-width: auto;
@btn-large-circle-width: 36px;

@btn-size-mini-height: 22px;
@btn-size-small-height: 28px;
@btn-size-normal-height: 32px;
@btn-size-large-height: 36px;

@btn-mini-square-padding:0 8px;
@btn-mini-round-padding:0 8px;
@btn-mini-circle-padding:0 8px;
@btn-small-square-padding:0 14px;
@btn-small-round-padding:0 14px;
@btn-small-circle-padding: 0;
@btn-normal-square-padding:0 16px;
@btn-normal-round-padding:0 16px;
@btn-normal-circle-padding:0;
@btn-large-square-padding:0 18px;
@btn-large-round-padding:0 18px;
@btn-large-circle-padding:0;

@btn-mini-square-radius: 4px;
@btn-mini-round-radius: 22px;
@btn-mini-circle-radius: 22px;
@btn-small-square-radius: 4px;
@btn-small-round-radius: 28px;
@btn-small-circle-radius: 28px;
@btn-normal-square-radius: 4px;
@btn-normal-round-radius: 32px;
@btn-normal-circle-radius: 32px;
@btn-large-square-radius: 6px;
@btn-large-round-radius: 36px;
@btn-large-circle-radius: 36px;

@btn-type-normal-border: solid;
@btn-type-primary-border: solid;
@btn-type-plain-border: solid;
@btn-type-dashed-border: dashed;
@btn-type-text-border: none;

/** Type: normal, Status: normal*/
@btn-type-normal-status-normal-bg: @gary-4;
@btn-type-normal-status-normal-color: @gary-10;
@btn-type-normal-status-normal-border: @gary-4;
@btn-type-normal-status-normal-bg-hover: @gary-3;
@btn-type-normal-status-normal-color-hover: @gary-9;
@btn-type-normal-status-normal-border-hover: @gary-3;
@btn-type-normal-status-normal-bg-active: @gary-5;
@btn-type-normal-status-normal-color-active: @gary-9;
@btn-type-normal-status-normal-border-active: @gary-5;

/** Type: primary, Status: normal*/
@btn-type-primary-status-normal-bg: @gary-7;
@btn-type-primary-status-normal-color: @gary-1;
@btn-type-primary-status-normal-border: @gary-7;
@btn-type-primary-status-normal-bg-hover: @gary-6;
@btn-type-primary-status-normal-color-hover: @gary-1;
@btn-type-primary-status-normal-border-hover: @gary-6;
@btn-type-primary-status-normal-bg-active: @gary-8;
@btn-type-primary-status-normal-color-active: @gary-1;
@btn-type-primary-status-normal-border-active: @gary-8;

/** Type: plain, Status: normal*/
@btn-type-plain-status-normal-bg: @gary-1;
@btn-type-plain-status-normal-color: @gary-12;
@btn-type-plain-status-normal-border: @gary-6;
@btn-type-plain-status-normal-bg-hover: @gary-2;
@btn-type-plain-status-normal-color-hover: @gary-10;
@btn-type-plain-status-normal-border-hover: @gary-5;
@btn-type-plain-status-normal-bg-active: @gary-3;
@btn-type-plain-status-normal-color-active: @gary-12;
@btn-type-plain-status-normal-border-active: @gary-6;

/** Type: dashed, Status: normal*/
@btn-type-dashed-status-normal-bg: @gary-1;
@btn-type-dashed-status-normal-color: @gary-12;
@btn-type-dashed-status-normal-border: @gary-6;
@btn-type-dashed-status-normal-bg-hover: @gary-2;
@btn-type-dashed-status-normal-color-hover: @gary-10;
@btn-type-dashed-status-normal-border-hover: @gary-5;
@btn-type-dashed-status-normal-bg-active: @gary-3;
@btn-type-dashed-status-normal-color-active: @gary-12;
@btn-type-dashed-status-normal-border-active: @gary-6;

/** Type: text, Status: normal*/
@btn-type-text-status-normal-bg: none;
@btn-type-text-status-normal-color: @gary-12;
@btn-type-text-status-normal-border: none;
@btn-type-text-status-normal-bg-hover: none;
@btn-type-text-status-normal-color-hover: @gary-10;
@btn-type-text-status-normal-border-hover: none;
@btn-type-text-status-normal-bg-active: none;
@btn-type-text-status-normal-color-active: @gary-12;
@btn-type-text-status-normal-border-active: none;

/** Type: normal, Status: primary*/
@btn-type-normal-status-primary-bg: @primary-1;
@btn-type-normal-status-primary-color: @primary-7;
@btn-type-normal-status-primary-border: @primary-1;
@btn-type-normal-status-primary-bg-hover: @primary-0;
@btn-type-normal-status-primary-color-hover: @primary-7;
@btn-type-normal-status-primary-border-hover: @primary-0;
@btn-type-normal-status-primary-bg-active: @primary-2;
@btn-type-normal-status-primary-color-active: @primary-7;
@btn-type-normal-status-primary-border-active: @primary-2;

/** Type: primary, Status: primary*/
@btn-type-primary-status-primary-bg: @primary-6;
@btn-type-primary-status-primary-color: @gary-1;
@btn-type-primary-status-primary-border: @primary-6;
@btn-type-primary-status-primary-bg-hover: @primary-5;
@btn-type-primary-status-primary-color-hover: @gary-1;
@btn-type-primary-status-primary-border-hover: @primary-5;
@btn-type-primary-status-primary-bg-active: @primary-7;
@btn-type-primary-status-primary-color-active: @gary-1;
@btn-type-primary-status-primary-border-active: @primary-7;

/** Type: plain, Status: primary*/
@btn-type-plain-status-primary-bg: @primary-1;
@btn-type-plain-status-primary-color: @primary-7;
@btn-type-plain-status-primary-border: @primary-6;
@btn-type-plain-status-primary-bg-hover: @primary-0;
@btn-type-plain-status-primary-color-hover: @primary-7;
@btn-type-plain-status-primary-border-hover: @primary-5;
@btn-type-plain-status-primary-bg-active: @primary-2;
@btn-type-plain-status-primary-color-active: @primary-7;
@btn-type-plain-status-primary-border-active: @primary-7;

/** Type: dashed, Status: primary*/
@btn-type-dashed-status-primary-bg: @primary-1;
@btn-type-dashed-status-primary-color: @primary-7;
@btn-type-dashed-status-primary-border: @primary-6;
@btn-type-dashed-status-primary-bg-hover: @primary-0;
@btn-type-dashed-status-primary-color-hover: @primary-7;
@btn-type-dashed-status-primary-border-hover: @primary-5;
@btn-type-dashed-status-primary-bg-active: @primary-2;
@btn-type-dashed-status-primary-color-active: @primary-7;
@btn-type-dashed-status-primary-border-active: @primary-7;

/** Type: text, Status: primary*/
@btn-type-text-status-primary-bg: none;
@btn-type-text-status-primary-color: @primary-6;
@btn-type-text-status-primary-border: none;
@btn-type-text-status-primary-bg-hover: none;
@btn-type-text-status-primary-color-hover: @primary-6;
@btn-type-text-status-primary-border-hover: none;
@btn-type-text-status-primary-bg-active: none;
@btn-type-text-status-primary-color-active: @primary-8;
@btn-type-text-status-primary-border-active: none;

/** Type: normal, Status: success*/
@btn-type-normal-status-success-bg: @success-1;
@btn-type-normal-status-success-color: @success-7;
@btn-type-normal-status-success-border: @success-1;
@btn-type-normal-status-success-bg-hover: @success-0;
@btn-type-normal-status-success-color-hover: @success-7;
@btn-type-normal-status-success-border-hover: @success-0;
@btn-type-normal-status-success-bg-active: @success-2;
@btn-type-normal-status-success-color-active: @success-7;
@btn-type-normal-status-success-border-active: @success-2;

/** Type: primary, Status: success*/
@btn-type-primary-status-success-bg: @success-6;
@btn-type-primary-status-success-color: @gary-1;
@btn-type-primary-status-success-border: @success-6;
@btn-type-primary-status-success-bg-hover: @success-5;
@btn-type-primary-status-success-color-hover: @gary-1;
@btn-type-primary-status-success-border-hover: @success-5;
@btn-type-primary-status-success-bg-active: @success-7;
@btn-type-primary-status-success-color-active: @gary-1;
@btn-type-primary-status-success-border-active: @success-7;

/** Type: plain, Status: success*/
@btn-type-plain-status-success-bg: @success-1;
@btn-type-plain-status-success-color: @success-7;
@btn-type-plain-status-success-border: @success-6;
@btn-type-plain-status-success-bg-hover: @success-0;
@btn-type-plain-status-success-color-hover: @success-7;
@btn-type-plain-status-success-border-hover: @success-5;
@btn-type-plain-status-success-bg-active: @success-2;
@btn-type-plain-status-success-color-active: @success-7;
@btn-type-plain-status-success-border-active: @success-7;

/** Type: dashed, Status: success*/
@btn-type-dashed-status-success-bg: @success-1;
@btn-type-dashed-status-success-color: @success-7;
@btn-type-dashed-status-success-border: @success-6;
@btn-type-dashed-status-success-bg-hover: @success-0;
@btn-type-dashed-status-success-color-hover: @success-7;
@btn-type-dashed-status-success-border-hover: @success-5;
@btn-type-dashed-status-success-bg-active: @success-2;
@btn-type-dashed-status-success-color-active: @success-7;
@btn-type-dashed-status-success-border-active: @success-7;

/** Type: text, Status: success*/
@btn-type-text-status-success-bg: none;
@btn-type-text-status-success-color: @success-6;
@btn-type-text-status-success-border: none;
@btn-type-text-status-success-bg-hover: none;
@btn-type-text-status-success-color-hover: @success-6;
@btn-type-text-status-success-border-hover: none;
@btn-type-text-status-success-bg-active: none;
@btn-type-text-status-success-color-active: @success-8;
@btn-type-text-status-success-border-active: none;

/** Type: normal, Status: warning*/
@btn-type-normal-status-warning-bg: @warning-1;
@btn-type-normal-status-warning-color: @warning-7;
@btn-type-normal-status-warning-border: @warning-1;
@btn-type-normal-status-warning-bg-hover: @warning-0;
@btn-type-normal-status-warning-color-hover: @warning-7;
@btn-type-normal-status-warning-border-hover: @warning-0;
@btn-type-normal-status-warning-bg-active: @warning-2;
@btn-type-normal-status-warning-color-active: @warning-7;
@btn-type-normal-status-warning-border-active: @warning-2;

/** Type: primary, Status: warning*/
@btn-type-primary-status-warning-bg: @warning-6;
@btn-type-primary-status-warning-color: @gary-1;
@btn-type-primary-status-warning-border: @warning-6;
@btn-type-primary-status-warning-bg-hover: @warning-5;
@btn-type-primary-status-warning-color-hover: @gary-1;
@btn-type-primary-status-warning-border-hover: @warning-5;
@btn-type-primary-status-warning-bg-active: @warning-7;
@btn-type-primary-status-warning-color-active: @gary-1;
@btn-type-primary-status-warning-border-active: @warning-7;

/** Type: plain, Status: warning*/
@btn-type-plain-status-warning-bg: @warning-1;
@btn-type-plain-status-warning-color: @warning-7;
@btn-type-plain-status-warning-border: @warning-6;
@btn-type-plain-status-warning-bg-hover: @warning-0;
@btn-type-plain-status-warning-color-hover: @warning-7;
@btn-type-plain-status-warning-border-hover: @warning-5;
@btn-type-plain-status-warning-bg-active: @warning-2;
@btn-type-plain-status-warning-color-active: @warning-7;
@btn-type-plain-status-warning-border-active: @warning-7;

/** Type: dashed, Status: warning*/
@btn-type-dashed-status-warning-bg: @warning-1;
@btn-type-dashed-status-warning-color: @warning-7;
@btn-type-dashed-status-warning-border: @warning-6;
@btn-type-dashed-status-warning-bg-hover: @warning-0;
@btn-type-dashed-status-warning-color-hover: @warning-7;
@btn-type-dashed-status-warning-border-hover: @warning-5;
@btn-type-dashed-status-warning-bg-active: @warning-2;
@btn-type-dashed-status-warning-color-active: @warning-7;
@btn-type-dashed-status-warning-border-active: @warning-7;

/** Type: text, Status: warning*/
@btn-type-text-status-warning-bg: none;
@btn-type-text-status-warning-color: @warning-6;
@btn-type-text-status-warning-border: none;
@btn-type-text-status-warning-bg-hover: none;
@btn-type-text-status-warning-color-hover: @warning-6;
@btn-type-text-status-warning-border-hover: none;
@btn-type-text-status-warning-bg-active: none;
@btn-type-text-status-warning-color-active: @warning-8;
@btn-type-text-status-warning-border-active: none;

/** Type: normal, Status: danger*/
@btn-type-normal-status-danger-bg: @danger-1;
@btn-type-normal-status-danger-color: @danger-7;
@btn-type-normal-status-danger-border: @danger-1;
@btn-type-normal-status-danger-bg-hover: @danger-0;
@btn-type-normal-status-danger-color-hover: @danger-7;
@btn-type-normal-status-danger-border-hover: @danger-0;
@btn-type-normal-status-danger-bg-active: @danger-2;
@btn-type-normal-status-danger-color-active: @danger-7;
@btn-type-normal-status-danger-border-active: @danger-2;

/** Type: primary, Status: danger*/
@btn-type-primary-status-danger-bg: @danger-6;
@btn-type-primary-status-danger-color: @gary-1;
@btn-type-primary-status-danger-border: @danger-6;
@btn-type-primary-status-danger-bg-hover: @danger-5;
@btn-type-primary-status-danger-color-hover: @gary-1;
@btn-type-primary-status-danger-border-hover: @danger-5;
@btn-type-primary-status-danger-bg-active: @danger-7;
@btn-type-primary-status-danger-color-active: @gary-1;
@btn-type-primary-status-danger-border-active: @danger-7;

/** Type: plain, Status: danger*/
@btn-type-plain-status-danger-bg: @danger-1;
@btn-type-plain-status-danger-color: @danger-7;
@btn-type-plain-status-danger-border: @danger-6;
@btn-type-plain-status-danger-bg-hover: @danger-0;
@btn-type-plain-status-danger-color-hover: @danger-7;
@btn-type-plain-status-danger-border-hover: @danger-5;
@btn-type-plain-status-danger-bg-active: @danger-2;
@btn-type-plain-status-danger-color-active: @danger-7;
@btn-type-plain-status-danger-border-active: @danger-7;

/** Type: dashed, Status: danger*/
@btn-type-dashed-status-danger-bg: @danger-1;
@btn-type-dashed-status-danger-color: @danger-7;
@btn-type-dashed-status-danger-border: @danger-6;
@btn-type-dashed-status-danger-bg-hover: @danger-0;
@btn-type-dashed-status-danger-color-hover: @danger-7;
@btn-type-dashed-status-danger-border-hover: @danger-5;
@btn-type-dashed-status-danger-bg-active: @danger-2;
@btn-type-dashed-status-danger-color-active: @danger-7;
@btn-type-dashed-status-danger-border-active: @danger-7;

/** Type: text, Status: danger*/
@btn-type-text-status-danger-bg: none;
@btn-type-text-status-danger-color: @danger-6;
@btn-type-text-status-danger-border: none;
@btn-type-text-status-danger-bg-hover: none;
@btn-type-text-status-danger-color-hover: @danger-6;
@btn-type-text-status-danger-border-hover: none;
@btn-type-text-status-danger-bg-active: none;
@btn-type-text-status-danger-color-active: @danger-8;
@btn-type-text-status-danger-border-active: none;