bootstrap-sassに色関係のクラスを追加する

初投稿です。

最近ようやくBootstrap3に触れることになったのですが、
.btn-successとか.alert-dangerとかの色関係のクラスって使いづらくないですか？
怒られるかもしれないけど.btn-redとか使いたい。簡単に増やしたい。

なので作りました。.◯◯◯-redと.◯◯◯-blueを増やす例です。
SassのMap機能を利用するのでSass3.3以上が必要です。

/assets/stylesheets/bootstrap/内に_custom-theme.scssを作り、
内容を下記に。

bootstrap/_custom-theme.scss

@import "mixins";

//== Custom Colors
//
//

//redの基本色
$brand-red:             #cc3333;
$btn-red-color:         #fff !default;
$state-red-text:        #ee0000 !default;
$state-red-bg:          #ffdddd !default;

//blueの基本色
$brand-blue:            #3333cc;
$btn-blue-color:        #fff !default;
$state-blue-text:       #0000ee !default;
$state-blue-bg:         #ddddff !default;

//追加する色のセットを連想配列で用意する
$customcolors: (
  red:(
    brand:              $brand-red,
    btn-color:          $btn-red-color,
    btn-bg:             $brand-red,
    btn-border:         darken($brand-red, 5%),
    state-text:         $state-red-text,
    state-bg:           $state-red-bg,
    state-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    label-bg:           $brand-red,
    alert-bg:           $state-red-bg,
    alert-text:         $state-red-text,
    alert-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    progress-bar-bg:    $brand-red,
    panel-text:         $state-red-text,
    panel-border:       darken(adjust-hue($state-red-bg, -10), 5%),
    panel-heading-bg:   $state-red-bg
  ),
  blue:(
    brand:              $brand-blue,
    btn-color:          $btn-blue-color,
    btn-bg:             $brand-blue,
    btn-border:         darken($brand-blue, 5%),
    state-text:         $state-blue-text,
    state-bg:           $state-blue-bg,
    state-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    label-bg:           $brand-blue,
    alert-bg:           $state-blue-bg,
    alert-text:         $state-blue-text,
    alert-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    progress-bar-bg:    $brand-blue,
    panel-text:         $state-blue-text,
    panel-border:       darken(adjust-hue($state-blue-bg, -10), 5%),
    panel-heading-bg:   $state-blue-bg
  )
);


//== Components
//
//
//追加したいCSSコンポーネントを選択（trueで生成）
$components: (
  alert:        true,
  btn:          true,
  form:         true,
  label:        true,
  list-group:   true,
  panel:        true,
  progress-bar: true,
  table:        true,
  helper-class: true
);

//一応mixin化
@mixin theme-gen() {
  @each $color in $customcolors{
    //alert
    @if map-get($components, alert) == true {
      .alert-#{$color} {
        @include alert-variant(map-get(map-get($customcolors, #{$color}), alert-bg), map-get(map-get($customcolors, #{$color}), alert-border),map-get(map-get($customcolors, #{$color}), alert-text));
      }
    }
    //button
    @if map-get($components, btn) == true {
      .btn-#{$color} {
        @include button-variant(map-get(map-get($customcolors, #{$color}), btn-color), map-get(map-get($customcolors, #{$color}), btn-bg), map-get(map-get($customcolors, #{$color}), btn-border));
      }
    }
    //form
    @if map-get($components, form) == true {
      .has-#{$color} {
       @include form-control-validation(map-get(map-get($customcolors, #{$color}), state-text), map-get(map-get($customcolors, #{$color}), state-text), map-get(map-get($customcolors, #{$color}), state-bg));
      }
    }
    //label
    @if map-get($components, label) == true {
      .label-#{$color} {
        @include label-variant(map-get(map-get($customcolors, #{$color}), label-bg));
      }
    }
    //list-group
    @if map-get($components, list-group) == true {
      @include list-group-item-variant(#{$color}, map-get(map-get($customcolors, #{$color}), state-bg), map-get(map-get($customcolors, #{$color}), state-text));
    }
    //panel
    @if map-get($components, panel) == true {
      .panel-#{$color} {
        @include panel-variant(map-get(map-get($customcolors, #{$color}), panel-border), map-get(map-get($customcolors, #{$color}), panel-text), map-get(map-get($customcolors, #{$color}), panel-heading-bg), map-get(map-get($customcolors, #{$color}), panel-border));
      }
    }
    //progress-bar
    @if map-get($components, progress-bar) == true {
      .progress-bar-#{$color} {
        @include progress-bar-variant(map-get(map-get($customcolors, #{$color}), progress-bar-bg));
      }
    }
    //table
    @if map-get($components, table) == true {
      @include table-row-variant(#{$color}, map-get(map-get($customcolors, #{$color}), state-bg));
    }
    //helper-class
    @if map-get($components, helper-class) == true {
      @include text-emphasis-variant('.text-#{$color}', map-get(map-get($customcolors, #{$color}), state-text));
      @include bg-variant('.bg-#{$color}', map-get(map-get($customcolors, #{$color}), state-bg));
    }
  }
}

//生成
@include theme-gen();

あとは_bootstrap.scssなどに@include '_custom-theme'で読み込ませる。

こんな感じに.◯◯◯-redと.◯◯◯-blueが使えるようになります。

もっといい方法ないすかね