Blue and Grey / Dark to Light

SassMeister-input-HTML.html

<h1>Blue</h1>
<div class="container">
  <div class="blue-dark">
    <strong>blue-dark</strong>
    <p>aka blue-70-mod</p>
    <p>bluemix-color('blue-70')</p>
    <p>#2D3F49</p>
    <p>Page bg</p>
  </div>
  <div class="blue-darker">
    <strong>blue-darker</strong>
    <p>aka blue-90-mod</p>
    <p>bluemix-color('blue-90')</p>
    <p>#20343E</p>
    <p>Item Detail Header</p>
  </div>
  <div class="blue-darkest">
    <strong>blue-darkest</strong>
    <p>aka ibm-blue-90</p>
    <p>color('blue-90')</p>
    <p>#152934</p>
    <p>Global Header bg</p>
  </div>
  <div class="blue-light">
    <strong>blue-light</strong>
    <p>aka ibm-blue-30</p>
    <p>color('blue-30')</p>
    <p>#5AAAFA</p>
    <p>Primary Accent (Selected State?)</p>
  </div>
  <div class="blue-lighter">
    <strong>blue-lighter</strong>
    <p>aka ibm-blue-20</p>
    <p>color('blue-20')</p>
    <p>#7CC7FF</p>
    <p>(Button/Link/Info?)</p>
  </div>
</div>

<h1>Gray</h1>
<div class="container">
  <div class="gray-dark">
    <strong>gray-dark</strong>
    <p>aka gray-cool-60-mod</p>
    <p>bluemix-color('gray-60')</p>
    <p>#485760</p>
    <p>Dark buttons</p>
  </div>
  <div class="gray-darker">
    <strong>gray-darker</strong>
    <p>aka gray-cool-60-mod at 50%</p>
    <p>bluemix-color('gray-60-lighter')</p>
    <p>#42535C</p>
    <p>Module Bg</p>
  </div>
  <div class="gray-darkest">
    <strong>gray-darkest</strong>
    <p>aka gray-cool-60-mod at 70%</p>
    <p>bluemix-color('gray-60-light')</p>
    <p>#394B54</p>
    <p>Table Stripes</p>
  </div>
  <div class="gray-light">
    <strong>gray-light</strong>
    <p>aka gray-cool-60</p>
    <p>color('gray', 60)</p>
    <p>#5A6872</p>
    <p>Divider</p>
  </div>
  <div class="gray-lighter">
    <strong>gray-lighter</strong>
    <p>aka gray-atlas</p>
    <p>bluemix-color('gray-atlas')</p>
    <p>#8C9BA5</p>
    <p>IP Address/Route</p>
  </div>
</div>

<h1>Unique Colors</h1>
<div class="container">
  <div class="green">
    <strong>green</strong>
    <p>aka ibm-green-30</p>
    <p>color('green', 30)</p>
    <p>#8CD211</p>
    <p>Accent/Good Health</p>
  </div>
  <div class="red">
    <strong>red</strong>
    <p>aka ibm-red-40</p>
    <p>color('red', 40)</p>
    <p>#FF5050</p>
    <p>Accent/Bad Health</p>
  </div>
  <div class="yellow">
    <strong>yellow</strong>
    <p>aka ibm-yellow-30</p>
    <p>color('yellow', 30)</p>
    <p>#FDD500</p>
    <p>Accent/ Medium Health</p>
  </div>
  <div class="teal">
    <strong>teal</strong>
    <p>aka ibm-teal-20</p>
    <p>color('teal', 20)</p>
    <p>#6FEDD8</p>
    <p>Secondary Accent</p>
  </div>
  <div class="white">
    <strong>white</strong>
    <p>color('white')</p>
    <p>#FFFFFF</p>
    <p>Primary Text</p>
  </div>
</div>

SassMeister-input.scss

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

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

//////////////////////////////
// Color Palette
//
// Gets the specified color from the specified color palette
//
// Usage:
//
// background: color('blue', 80); // #1d3649
// background: color('blue');     // #4178be
//////////////////////////////
@function color($palette, $tone: 'core') {
  // Add a little helper so tone can be passed as single digit number
  @if type-of($tone) == 'number' {
    @if $tone % 10 == $tone {
      $tone: $tone * 10;
    }
  }

  // Because it's spelled gr(a|e)y and we've got spaces
  @if $palette == 'grey' {
    $palette: 'gray';
  }
  @else if $palette == 'warm-grey' or $palette == 'warm grey' or $palette == 'warm gray' {
    $palette: 'warm-gray';
  }
  @else if $palette == 'cool-grey' or $palette == 'cool grey' or $palette == 'cool gray' {
    $palette: 'cool-gray';
  }
  @else if $palette == 'neutral white' {
    $palette: 'neutral-white';
  }
  @else if $palette == 'cool white' {
    $palette: 'cool-white';
  }
  @else if $palette == 'warm white' {
    $palette: 'warm-white';
  }

  @return map-get(map-get($__ibm-color-palettes, $palette), $tone);
}

//////////////////////////////
// Tint and Shade Functions
//////////////////////////////
// Internal helper: finds the palette and key of a color
@function _ibm-find-color($color) {
  $found-index: false;
  $found-palette: false;
  @each $palette, $vals in $__ibm-color-palettes {
    @if not $found-index {
      @each $key, $clr in $vals {
	@if $color == $clr and $key != 'core' {
	  $found-index: $key;
	  $found-palette: $palette;
	}
      }
    }
  }

  $error-message: 'Color #{$color} is not an IBM color';

  @if not $found-index {
    @if feature-exists(at-error) {
      @error $error-message;
    }
    @else {
      @warn $error-message;
    }
  }
  @return ('index': $found-index, 'palette': $found-palette);
}

// Internal helper: transforms amount into base 10, rounding
@function _ibm-round-tint-shade($amount) {
  @if $amount < 10 {
    $amount: $amount * 10;
  }

  $return: round($amount);
  $remainder: $return % 10;
  $return: $return - $remainder;
  @if $remainder >= 5 {
    $return: $return + 10;
  }

  @return $return;
}

//////////////////////////////
// Tint an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to tint (lighten) the color along its palette.
// Pegged to the lightest color in the palette
//////////////////////////////
@function color-tint($color, $amount) {
  $key: _ibm-find-color($color);
  $index: map-get($key, 'index');
  $palette: map-get($key, 'palette');
  $move: _ibm-round-tint-shade($amount);

  $index: $index - $move;
  @if ($index < 10) {
    $index: 10;
  }

  @return color($palette, $index);
}

//////////////////////////////
// Shade an IBM Color
//
// Pass in a color (as retrieved from the `color` function) and how many stops you want to shade (darken) the color along its palette.
// Pegged to the darkest color in the palette
//////////////////////////////
@function color-shade($color, $amount) {
  $key: _ibm-find-color($color);
  $index: map-get($key, 'index');
  $palette: map-get($key, 'palette');
  $move: _ibm-round-tint-shade($amount);

  $index: $index + $move;
  @if ($index > 100) {
    $index: 100;
  }

  @return color($palette, $index);
}

//////////////////////////////
// Get Colors
//
// Lists out available colors
//////////////////////////////
@function get-colors($palette: null) {
  // Return a list of colors available if nothing is passed in
  @if $palette == null {
    @return map-keys($__ibm-color-palettes);
  }
  // Return the full color map if 'all' is passed in
  @else if $palette == 'all' {
    @return $__ibm-color-palettes;
  }
  // Return just the color map if a specific color is passed in
  @else {
    @return map-get($__ibm-color-palettes, $palette);
  }
}

//////////////////////////////
// IBM Color Palettes
//////////////////////////////
$__ibm-color-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: #000
  ),
  'cool-gray': (
     core: #6d7777,
     10: #dfe9e9,
     20: #c8d2d2,
     30: #aeb8b8,
     40: #959f9f,
     50: #6d7777,
     60: #5a6464,
     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: #000
  ),
  'white': (
    core: #fff
  )
);

//////////////////////////////
// ATLAS PALETTE
//////////////////////////////

$palette__bluemix: (
  'blue-dark': #2D3F49,
  'blue-darker': #20343E,
  'blue-darkest': #152934,
  'blue-light': color('blue', 30),
  'blue-lighter': color('blue', 20),
  'gray-dark': #485760,
  'gray-darker': #42535C,
  'gray-darkest': #394B54,
  'gray-light': #8C9BA5,
  'gray-lighter': color('cool-gray', 60),
  'green': color('green', 30),
  'red': color('red', 40),
  'teal': color('teal', 20),
  'white': color('white'),
  'yellow': color('yellow', 30),
);

@function palette($color) {
  @if map-has-key($palette__bluemix, $color) {
    @return map-get($palette__bluemix, $color);
  } @else {
    @warn "We couldn't find #{$color} in $palette__bluemix map.
         Please make sure it's defined."
  }
}
* {
  box-sizing: border-box;
}

%base {
  width: 300px;
  height: 250px;
  padding: 2em;
  font-family: sans-serif;
  font-size: 1rem;
}

@mixin box($bg-color, $text: white) {
  @extend %base;
  background-color: $bg-color;
  color: $text;
  
  strong {
    font-size: 1.25rem;
  }
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.blue {
  &-dark { @include box(palette('blue-dark')); }
  &-darker { @include box(palette('blue-darker')); }
  &-darkest { @include box(palette('blue-darkest')); }
  &-light { @include box(palette('blue-light'), black); }
  &-lighter { @include box(palette('blue-lighter'), black); }
}

.gray {
  &-dark { @include box(palette('gray-dark')); }
  &-darker { @include box(palette('gray-darker')); }
  &-darkest { @include box(palette('gray-darkest')); }
  &-light { @include box(palette('gray-light'), black); }
  &-lighter { @include box(palette('gray-lighter'), black); }
}

.green { @include box(palette('green'), black); }
.red { @include box(palette('red'), black); }
.teal { @include box(palette('teal'), black); }
.yellow { @include box(palette('yellow'), black); }
.white { 
  @include box(palette('white'), black); 
  border: 1px solid #ccc;
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.blue-dark, .blue-darker, .blue-darkest, .blue-light, .blue-lighter, .gray-dark, .gray-darker, .gray-darkest, .gray-light, .gray-lighter, .green, .red, .teal, .yellow, .white {
  width: 300px;
  height: 250px;
  padding: 2em;
  font-family: sans-serif;
  font-size: 1rem;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.blue-dark {
  background-color: #2D3F49;
  color: white;
}

.blue-dark strong {
  font-size: 1.25rem;
}

.blue-darker {
  background-color: #20343E;
  color: white;
}

.blue-darker strong {
  font-size: 1.25rem;
}

.blue-darkest {
  background-color: #152934;
  color: white;
}

.blue-darkest strong {
  font-size: 1.25rem;
}

.blue-light {
  background-color: #5aaafa;
  color: black;
}

.blue-light strong {
  font-size: 1.25rem;
}

.blue-lighter {
  background-color: #7cc7ff;
  color: black;
}

.blue-lighter strong {
  font-size: 1.25rem;
}

.gray-dark {
  background-color: #485760;
  color: white;
}

.gray-dark strong {
  font-size: 1.25rem;
}

.gray-darker {
  background-color: #42535C;
  color: white;
}

.gray-darker strong {
  font-size: 1.25rem;
}

.gray-darkest {
  background-color: #394B54;
  color: white;
}

.gray-darkest strong {
  font-size: 1.25rem;
}

.gray-light {
  background-color: #8C9BA5;
  color: black;
}

.gray-light strong {
  font-size: 1.25rem;
}

.gray-lighter {
  background-color: #5a6464;
  color: black;
}

.gray-lighter strong {
  font-size: 1.25rem;
}

.green {
  background-color: #8cd211;
  color: black;
}

.green strong {
  font-size: 1.25rem;
}

.red {
  background-color: #ff5050;
  color: black;
}

.red strong {
  font-size: 1.25rem;
}

.teal {
  background-color: #6eedd8;
  color: black;
}

.teal strong {
  font-size: 1.25rem;
}

.yellow {
  background-color: #efc100;
  color: black;
}

.yellow strong {
  font-size: 1.25rem;
}

.white {
  background-color: #fff;
  color: black;
  border: 1px solid #ccc;
}

.white strong {
  font-size: 1.25rem;
}

SassMeister-rendered.html

<h1>Blue</h1>
<div class="container">
  <div class="blue-dark">
    <strong>blue-dark</strong>
    <p>aka blue-70-mod</p>
    <p>bluemix-color('blue-70')</p>
    <p>#2D3F49</p>
    <p>Page bg</p>
  </div>
  <div class="blue-darker">
    <strong>blue-darker</strong>
    <p>aka blue-90-mod</p>
    <p>bluemix-color('blue-90')</p>
    <p>#20343E</p>
    <p>Item Detail Header</p>
  </div>
  <div class="blue-darkest">
    <strong>blue-darkest</strong>
    <p>aka ibm-blue-90</p>
    <p>color('blue-90')</p>
    <p>#152934</p>
    <p>Global Header bg</p>
  </div>
  <div class="blue-light">
    <strong>blue-light</strong>
    <p>aka ibm-blue-30</p>
    <p>color('blue-30')</p>
    <p>#5AAAFA</p>
    <p>Primary Accent (Selected State?)</p>
  </div>
  <div class="blue-lighter">
    <strong>blue-lighter</strong>
    <p>aka ibm-blue-20</p>
    <p>color('blue-20')</p>
    <p>#7CC7FF</p>
    <p>(Button/Link/Info?)</p>
  </div>
</div>

<h1>Gray</h1>
<div class="container">
  <div class="gray-dark">
    <strong>gray-dark</strong>
    <p>aka gray-cool-60-mod</p>
    <p>bluemix-color('gray-60')</p>
    <p>#485760</p>
    <p>Dark buttons</p>
  </div>
  <div class="gray-darker">
    <strong>gray-darker</strong>
    <p>aka gray-cool-60-mod at 50%</p>
    <p>bluemix-color('gray-60-lighter')</p>
    <p>#42535C</p>
    <p>Module Bg</p>
  </div>
  <div class="gray-darkest">
    <strong>gray-darkest</strong>
    <p>aka gray-cool-60-mod at 70%</p>
    <p>bluemix-color('gray-60-light')</p>
    <p>#394B54</p>
    <p>Table Stripes</p>
  </div>
  <div class="gray-light">
    <strong>gray-light</strong>
    <p>aka gray-cool-60</p>
    <p>color('gray', 60)</p>
    <p>#5A6872</p>
    <p>Divider</p>
  </div>
  <div class="gray-lighter">
    <strong>gray-lighter</strong>
    <p>aka gray-atlas</p>
    <p>bluemix-color('gray-atlas')</p>
    <p>#8C9BA5</p>
    <p>IP Address/Route</p>
  </div>
</div>

<h1>Unique Colors</h1>
<div class="container">
  <div class="green">
    <strong>green</strong>
    <p>aka ibm-green-30</p>
    <p>color('green', 30)</p>
    <p>#8CD211</p>
    <p>Accent/Good Health</p>
  </div>
  <div class="red">
    <strong>red</strong>
    <p>aka ibm-red-40</p>
    <p>color('red', 40)</p>
    <p>#FF5050</p>
    <p>Accent/Bad Health</p>
  </div>
  <div class="yellow">
    <strong>yellow</strong>
    <p>aka ibm-yellow-30</p>
    <p>color('yellow', 30)</p>
    <p>#FDD500</p>
    <p>Accent/ Medium Health</p>
  </div>
  <div class="teal">
    <strong>teal</strong>
    <p>aka ibm-teal-20</p>
    <p>color('teal', 20)</p>
    <p>#6FEDD8</p>
    <p>Secondary Accent</p>
  </div>
  <div class="white">
    <strong>white</strong>
    <p>color('white')</p>
    <p>#FFFFFF</p>
    <p>Primary Text</p>
  </div>
</div>