Color Mixins (Generated by SassMeister.com)

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*
Source: http://www.ibm.com/design/language/resources.shtml
Topic: Color Mixins
*/

////////////////////////////////
//                            //
// IBM Design Language        //
// Color Palette              //
//                            //
////////////////////////////////

// Palette Map
$palettes: (
  'blue': (
    core: #4178BE,
    10: #C0E6FF,
    20: #7CC7FF,
    30: #5AAAFA,
    40: #5596E6,
    50: #4178BE,
    60: #325C80,
    70: #264A60,
    80: #1D3649,
    90: #152935,
    100: #010205
  ),
  'green': (
    core: #4B8400,
    10: #C8F08F,
    20: #B4E051,
    30: #8CD211,
    40: #5AA700,
    50: #4B8400,
    60: #2D660A,
    70: #144D14,
    80: #0A3C02,
    90: #0C2808,
    100: #010200
  ),
  'teal': (
    core: #008571,
    10: #A7FAE6,
    20: #6EEDD8,
    30: #41D6C3,
    40: #00B4A0,
    50: #008571,
    60: #006D5D,
    70: #005448,
    80: #003C32,
    90: #012B22,
    100: #000202
  ),
  'purple': (
    core: #9855D4,
    10: #EED2FF,
    20: #D7AAFF,
    30: #BA8FF7,
    40: #AF6EE8,
    50: #9855D4,
    60: #734098,
    70: #562F72,
    80: #412356,
    90: #311A41,
    100: #030103
  ),
  'magenta': (
    core: #DB2780,
    10: #FFD2FF,
    20: #FF9EEE,
    30: #FF71D4,
    40: #FF3CA0,
    50: #DB2780,
    60: #A6266E,
    70: #7C1C58,
    80: #601146,
    90: #3A0B2E,
    100: #040102
  ),
  'red': (
    core: #E71D32,
    10: #FFD2DD,
    20: #FFA5B4,
    30: #FF7D87,
    40: #FF5050,
    50: #E71D32,
    60: #AD1625,
    70: #8C101C,
    80: #6E0A1E,
    90: #4C0A17,
    100: #040001
  ),
  'orange': (
    core: #FF7832,
    10: #FFD4A0,
    20: #FFA573,
    30: #FF7832,
    40: #FF5003,
    50: #D74108,
    60: #A53725,
    70: #872A0F,
    80: #6D120F,
    90: #43100B,
    100: #030100
  ),
  'yellow': (
    core: #FDD600,
    10: #FDE876,
    20: #FDD600,
    30: #EFC100,
    40: #BE9B00,
    50: #8C7300,
    60: #735F00,
    70: #574A00,
    80: #3C3200,
    90: #281E00,
    100: #020100
  ),
  'gray': (
     core: #777677,
     10: #E0E0E0,
     20: #C7C7C7,
     30: #AEAEAE,
     40: #959595,
     50: #777677,
     60: #5A5A5A,
     70: #464646,
     80: #323232,
     90: #121212,
    100: #000000
  ),
  'cool-gray': (
     core: #6D7777,
     10: #DFE9E9,
     20: #C8D2D2,
     30: #AEB8B8,
     40: #959F9F,
     50: #6D7777,
     60: #586262,
     70: #3C4646,
     80: #323C3C,
     90: #0D1111,
    100: #000203
  ),
  'warm-gray': (
     core: #7D7373,
     10: #E9E0E0,
     20: #D0C7C7,
     30: #B8AEAE,
     40: #9E9494,
     50: #7D7373,
     60: #645A5A,
     70: #504646,
     80: #3C3232,
     90: #1A1314,
    100: #030000
  ),
  'neutral-white': (
    core: #FDFDFD,
    10: #FDFDFD,
    20: #F9F9F9,
    30: #F4F4F4,
    40: #ECECEC
  ),
  'cool-white': (
    core: #FBFCFC,
    10: #FBFCFC,
    20: #F9F9FB,
    30: #F0F2F4,
    40: #ECF2F2
  ),
  'warm-white': (
    core: #FDFBFB,
    10: #FDFBFB,
    20: #FDFBFB,
    30: #F7F5F5,
    40: #F2EEEE
  ),
  'black': (
    core: #000000
  ),
  'white': (
    core: #FFFFFF
  )
);


// color() mixin:
/////////////////////////////////////////////////////
// Gets the specified color from the color palette //
//                                                 //
// Usage:                                          //
//  background: color('blue', 80); // #1D3649      //
//  background: color('blue', 8);  // #1D3649      //
//  background: color('blue');     // #4178BE      //
/////////////////////////////////////////////////////
@function color($color, $tone: 'core') {
  @if type-of($tone) == 'number' {
    @if $tone % 10 == $tone {
      $tone: $tone * 10;
    }
  }
  @return map-get(map-get($palettes, $color), $tone);
}

// Set background to blue 20 (light)
.test {
  background: color('blue', 20);
}

// Set background to blue 2 (Same)
.test2 {
  background: color('blue', 2);
}

// Set background to blue (Default "Middle")
.test3 {
  background: color('blue');
}


// get-colors() mixin:
/////////////////////////////////////////////////////
// Gets array of specified color from palette      //
//                                                 //
// See README for usage                            //
//                                                 //
/////////////////////////////////////////////////////
@function get-colors($color: null) {
  // Return a list of colors available if nothing is passed in
  @if $color == null {
    @return map-keys($palettes);
  }
  // Return the full color map if 'all' is passed in
  @else if $color == 'all' {
    @return $palettes;
  }
  // Return just the color map if a specific color is passed in
  @else {
    @return map-get($palettes, $color);
  }
}

/* Create classes like .red-10, .red-20 with associated
 hex values as the background for for all red palette colors */
 
@each $hue, $hex in get-colors('red') {
  .red-hue-#{$hue} {
    background: $hex;
  }
}

/* Create classes like .blue-10, .blue-20  with their associated
hex values as the background for all color pallete colors */


// @each $family, $family_map in get-colors('all') {
//   @each $hue, $hex in $family_map {
//     .#{$family}-#{$hue} {
//       background: $hex;
//     }
//   }
// }

// For debugging
@each $family in get-colors() {
  //@debug family;
}

SassMeister-output.css

/*
Source: http://www.ibm.com/design/language/resources.shtml
Topic: Color Mixins
*/
.test {
  background: #7CC7FF;
}

.test2 {
  background: #7CC7FF;
}

.test3 {
  background: #4178BE;
}

/* Create classes like .red-10, .red-20 with associated
 hex values as the background for for all red palette colors */
.red-hue-core {
  background: #E71D32;
}

.red-hue-10 {
  background: #FFD2DD;
}

.red-hue-20 {
  background: #FFA5B4;
}

.red-hue-30 {
  background: #FF7D87;
}

.red-hue-40 {
  background: #FF5050;
}

.red-hue-50 {
  background: #E71D32;
}

.red-hue-60 {
  background: #AD1625;
}

.red-hue-70 {
  background: #8C101C;
}

.red-hue-80 {
  background: #6E0A1E;
}

.red-hue-90 {
  background: #4C0A17;
}

.red-hue-100 {
  background: #040001;
}

/* Create classes like .blue-10, .blue-20  with their associated
hex values as the background for all color pallete colors */