RainBoots: Extend your color palette in Bootstrap 4 to change color, background-color, and fill.

_rainboots.scss

// RAINBOOTS
//
// Set-up:
// 1. Add this file to your scss directory in your Bootstrap 4 directory.
// 2. Add `@import "rainboots";` to the end of bootstrap.scss.
// 
// Configure:
// Comment out lines in the Utilities section that you don't want to include. See below.
// 
// Add classes in your HTML file
// Color Examples: bg-lime, text-lime, fill-lime.
// Gray Example: bg-gray-200, text-gray-500, fill-gray-900;


/* Mixins */
@mixin bg-colors($parent, $color){
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}
@mixin txt-colors($parent, $color){
  #{$parent} {
    color: $color !important;
  }
}
@mixin fill-colors($parent, $color){
  #{$parent} {
    fill: $color !important;
  }
}
@mixin bg-gray-colors($parent, $gray){
  #{$parent} {
    background-color: $gray !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus {
      background-color: darken($gray, 10%) !important;
    }
  }
}
@mixin txt-gray-colors($parent, $gray){
  #{$parent} {
    color: $gray !important;
  }
}
@mixin fill-gray-colors($parent, $gray){
  #{$parent} {
    fill: $gray !important;
  }
}
/* Utilities */
// $colors
@each $color, $value in $colors {
  @include bg-colors(".bg-#{$color}", $value);
  @include txt-colors(".text-#{$color}", $value);
  @include fill-colors(".fill-#{$color}", $value);
}
// $grays
@each $gray, $values in $grays {
  @include bg-gray-colors(".bg-gray-#{$gray}", $values);
  @include txt-gray-colors(".text-gray-#{$gray}", $values);
  @include fill-gray-colors(".fill-gray-#{$gray}", $values);
}