Button hover colors should be in _variables.scss file

The mixin for button-variant is defined like this:

@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))

Because of this, if you want to have the active background 10% darker or 7.5% lighter (for example) you either have to change the mixin file or write more custom css. This could be easily fixed:

/mixins/_buttons.scss

@mixin button-variant($background, $border, $active-background, $active-border)

_variables.scss

$active-background: darken($background, 7.5%);
$active-border: darken($border, 10%);

It looks as though this was probably the original intent, but somebody forgot to move those variables out of the mixin file.

[flachware]

@andresgalante I find myself struggling with the button mixins often enough with the need to modify some states (especially the hard-coded percentages and ‘lighten’ vs ‘darken’). As far as I can see the approach of the opening comment wouldn’t work, not so much because of the confusion, but because the $background variable is undefined until it gets set in the @each loop in /scss/_buttons.scss

How about a solution along these lines – this approach would users let easily adjust the percentages as well as the color function:

/scss/mixins/_buttons.scss

@mixin button-variant(
  $background,
  $border,
  $change,
  $btn-hover-change-bg,
  $btn-hover-change-border,
  $btn-active-change-bg,
  $btn-active-change-border) {
    @if $change == "darken" {
      $hover-bg:     darken($background, $btn-hover-change-bg);
      $hover-border: darken($border, $btn-hover-change-border);
      $active-bg:    darken($background, $btn-active-change-bg);
      $active-bg:    darken($border, $btn-active-change-border);
    } else {
      $hover-bg:     lighten($background, $btn-hover-change-bg);
      $hover-border: lighten($border, $btn-hover-change-border);
      $active-bg:    lighten($background, $btn-active-change-bg);
      $active-bg:    lighten($border, $btn-active-change-border);
    }
    
    ...

  }
}

/scss/_variables.scss

$btn-change: "darken";
$btn-hover-change-bg: 7.5%;
$btn-hover-change-border: 10%;
$btn-active-change-bg: 10%;
$btn-active-change-border: 12.5%;

[cdikibo]

Can I do this?