applyColors.scss

/* import the necessary Bootstrap files */
@import "{}/node_modules/bootstrap/scss/functions";
@import "{}/node_modules/bootstrap/scss/variables";
@import "{}/node_modules/bootstrap/scss/mixins/buttons";
@import "./colors";

/* -------begin customization-------- */

/* simply assign the value */
$body-bg: $lea-light;

/* or, use an existing variable */
$theme-colors: (
    primary: $lea-primary,
    secondary: $lea-secondary,
    light: $lea-light,
    gray: $lea-gray,
    dark: $lea-dark,
    warning: $lea-warning,
    danger: $lea-danger,
    info: $lea-info,
    success: $lea-success,
);

@each $color, $value in $theme-colors {

  /*
        default buttons
  */

  .btn-#{$color} {
    color: white !important;
    &:hover {
      color: white !important;
    }
    &.active {
      color: white !important;
    }
  }

  /*
        outline buttons
  */

  .btn-outline-#{$color} {
    &:hover {
      color: white !important;
    }
    &.active {
      color: white !important;
    }
  }

  /*
        lea action buttons
  */

  .lea-action-btn-#{$color} {
    color: $value !important;
    background-color: white !important;
    &:hover {
      background-color: $value !important;
      color: white !important;
    }
    &.active {
      background-color: $value !important;
      color: white !important;
    }
  }

  /*
        lea action outlines buttons
  */

  .lea-action-btn-outline-#{$color} {
    color: $value !important;
    background-color: white !important;
    &:hover {
      background-color: $value !important;
      color: white !important;
    }
    &.active {
      background-color: $value !important;
      color: white !important;
    }
  }
}