polestar-ui-kit/styles/images/button/mixin.less

## Install

// mixins for button
// ------------------------
.button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  .button-disabled();
}

.button-variant-clear(@color; @background; @border) {
  .button-color(@color; @background; @border);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  .button-disabled();
}

.button-variant-attention(@color; @background) {
  .button-color(@color; @background; @background);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  .button-disabled();
}

.button-variant-trouble(@color; @background) {
  .button-color(@color; @background; @background);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  .button-disabled();
}

.button-variant-critical(@color; @background) {
  .button-color(@color; @background; @background);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  .button-disabled();
}

.button-variant-ghost(@color) {
  .button-color(@color; transparent; @color);

  &:hover,
  &:focus {
    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
  }

  &:active,
  &.active {
    .button-color(~`colorPalette("@{color}", 6)`; transparent; ~`colorPalette("@{color}", 6)`);
  }

  .button-disabled();
}

// ghost button style
.btn-ghost() {
  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}

// clear button style
.btn-clear() {
  .button-variant-clear(@btn-clear-color, @btn-clear-bg, @btn-clear-border);
}

// attention button style
.btn-attention() {
  .button-variant-attention(@btn-attention-color, @btn-attention-bg);
}

// trouble button style
.btn-trouble() {
  .button-variant-trouble(@btn-trouble-color, @btn-trouble-bg);
}

// critical button style
.btn-critical() {
  .button-variant-critical(@btn-critical-color, @btn-critical-bg);
}