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

## Install

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

  &: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; @green-6; @green-6);
  }

  &: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; @gold-6; @gold-6);
  }

  &: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; @orange-6; @orange-6);
  }

  &: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; @red-6; @red-6);
  }

  &: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();
}

// Base styles of buttons
// --------------------------------------------------
.btn() {
  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
  }
}

// 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);
}

// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
  &.@{btnClassName}-sm {
    .button-size(@btn-circle-size-sm; 0; @font-size-base - 2px; 50%);
  }
}