Sassy Bootstrap Colors

gistfile1.sass

// Sassy Bootstrap Colors
//
// Hopefully, an easier way to globally update Bootstrap colors from a single color list.
// Nothing ground breaking, but it helps me out when clients request Bootstrap.
//
// Also included is a small function that allows you to use the color names list when building 
// custom modules/components as needed. I threw in a few color trumps at the end too, 
// so you can override any text or background color with a class.
//
// The best thing to do, if using Bootstrap, is just customize the whole thing from the ground up. But
// in case you're grabbing a CDN link or something.. well.. yeah, this should help.
//

$colors: (
  primary:     #286090,
  success:     #5cb85c,
  info:        #5bc0de,
  warning:     #f0ad4e,
  danger:      #d9534f,
  
  /* add custom colors as needed */
  custom-1:    #000000,
  custom-2:    #000000,
  white:       #FFFFFF,
  black:       #343434
);

// lets say we create something to reuse later
// example: html { foo: col("primary"); }
@function col($col) {
  @return map-get($colors, '#{$col}');
}

// set body color
body {
  color: col("black");
}

// blockquote border-color
blockquote {
  border-color: col("info");
}

// link color
a, a:link {
  color: col("primary");
}

// OMG, update those Bootstrap colors, yo!!
@each $color, $hex in $colors {

  // button color crashoverrides
  .btn.btn-#{$color} {
    background-color: $hex;
    border-color: darken($hex, 5%);
  }

  // alert: alert changes ahead
  .alert-#{$color} {
    background-color: lighten($hex, 40%);
    border: darken(adjust-hue($hex, -10), 5%);
    color: darken($hex, 10%);
  }

  // progressively progressing progress bars
  .progress-bar-#{$color} {
    background-color: $hex;
  }

  // passing judgement with labels
  .label-#{$color} {
    background-color: $hex;
      &[href] {
        &:hover,
        &:focus {
          background-color: darken($hex, 10%);
      }
    }
  }

  // list da groups items
  .list-group-item-#{$color} {
    background-color: lighten($hex, 40%);
    color: darken($hex, 10%);
    &[href] {
      &:hover,
      &:focus {
        color: $hex;
        background-color: lighten($hex, 30%);
      }
      &.active,
      &.active:hover,
      &.active:focus {
        color: #fff;
        background-color: $hex;
        border-color: $hex;
      }
    }
  }

  // paneling color variants
  .panel.panel-#{$color} {
    border-color: $hex;
    > .panel-heading {
      border-color: $hex;
      background-color:$hex;
    }
  }

  // text color trumps
  .#{$color} {
    color: $hex !important;
  }

  // background color trumps
  .bg-#{$color} {
    background-color: $hex !important;
  }

} // End Each