_ibm-colors.scss

////////////////////////////////
//                            //
// 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
//
// background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5)
// background: color('blue', $alpha: 0.5); // rgba(65, 120, 190, 0.5)
//
//////////////////////////////
@function color($palette, $grade: 0, $alpha: 1) {
  // 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';
  }

  $plt: map-get($__ibm-color-palettes, $palette);

  @if $plt {
    $grd: map-get($plt, $grade);
    @return rgba($grd, $alpha);
  }

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

  @return false;
}

//////////////////////////////
// Tint and Shade Functions
//////////////////////////////
$singles: 'neutral-white', 'cool-white', 'warm-white';
// 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 < 1 {
    $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);

  @if index($singles, $palette) {
    $index: $index - ($move / 10);
    @if $index < 1 {
      $index: 1;
    }
  }
  @else if $palette == 'black' {
    $index: 100;
  }
  @else if $palette == 'white' {
    $index: 0;
  }
  @else {
    $index: $index - $move;
    @if $index < 10 {
      $index: 1;
    }
  }

  @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);

  @if index($singles, $palette) {
    $index: $index - ($move / 10);
    @if $index > 4 {
      $index: 4;
    }
  }
  @else if $palette == 'black' {
    $index: 100;
  }
  @else if $palette == 'white' {
    $index: 0;
  }
  @else {
    $index: $index + $move;
    @if ($index > 90) {
      $index: 90;
    }
  }

  @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: (
  'ultramarine': (
    1: #e7e9f7,
    10: #d1d7f4,
    20: #b0bef3,
    30: #89a2f6,
    40: #648fff,
    50: #3c6df0,
    60: #3151b7,
    70: #2e3f8f,
    80: #252e6a,
    90: #20214f
  ),
  'blue': (
    1: #e1ebf7,
    10: #c8daf4,
    20: #a8c0f3,
    30: #79a6f6,
    40: #5392ff,
    50: #2d74da,
    60: #1f57a4,
    70: #25467a,
    80: #1d3458,
    90: #19273c
  ),
  'cerulean': (
    1: #deedf7,
    10: #c2dbf4,
    20: #95c4f3,
    30: #56acf2,
    40: #009bef,
    50: #047cc0,
    60: #175d8d,
    70: #1c496d,
    80: #1d364d,
    90: #1b2834
  ),
  'aqua': (
    1: #d1f0f7,
    10: #a0e3f0,
    20: #71cddd,
    30: #00b6cb,
    40: #12a3b4,
    50: #188291,
    60: #17616b,
    70: #164d56,
    80: #13393e,
    90: #122a2e
  ),
  'teal': (
    1: #c0f5e8,
    10: #8ee9d4,
    20: #40d5bb,
    30: #00baa1,
    40: #00a78f,
    50: #008673,
    60: #006456,
    70: #124f44,
    80: #133a32,
    90: #122b26
  ),
  'green': (
    1: #cef3d1,
    10: #89eda0,
    20: #57d785,
    30: #34bc6e,
    40: #00aa5e,
    50: #00884b,
    60: #116639,
    70: #12512e,
    80: #123b22,
    90: #112c1b
  ),
  'lime': (
    1: #d7f4bd,
    10: #b4e876,
    20: #95d13c,
    30: #81b532,
    40: #73a22c,
    50: #5b8121,
    60: #426200,
    70: #374c1a,
    80: #283912,
    90: #1f2a10
  ),
  'yellow': (
    1: #fbeaae,
    10: #fed500,
    20: #e3bc13,
    30: #c6a21a,
    40: #b3901f,
    50: #91721f,
    60: #70541b,
    70: #5b421a,
    80: #452f18,
    90: #372118
  ),
  'gold': (
    1: #f5e8db,
    10: #ffd191,
    20: #ffb000,
    30: #e39d14,
    40: #c4881c,
    50: #9c6d1e,
    60: #74521b,
    70: #5b421c,
    80: #42301b,
    90: #2f261c
  ),
  'orange': (
    1: #f5e8de,
    10: #fdcfad,
    20: #fcaf6d,
    30: #fe8500,
    40: #db7c00,
    50: #ad6418,
    60: #814b19,
    70: #653d1b,
    80: #482e1a,
    90: #33241c
  ),
  'peach': (
    1: #f7e7e2,
    10: #f8d0c3,
    20: #faad96,
    30: #fc835c,
    40: #fe6100,
    50: #c45433,
    60: #993a1d,
    70: #782f1c,
    80: #56251a,
    90: #3a201b
  ),
  'red': (
    1: #f7e6e6,
    10: #fccec7,
    20: #ffaa9d,
    30: #ff806c,
    40: #ff5c49,
    50: #e62325,
    60: #aa231f,
    70: #83231e,
    80: #5c1f1b,
    90: #3e1d1b
  ),
  'magenta': (
    1: #f5e7eb,
    10: #f5cedb,
    20: #f7aac3,
    30: #f87eac,
    40: #ff509e,
    50: #dc267f,
    60: #a91560,
    70: #831b4c,
    80: #5d1a38,
    90: #401a29
  ),
  'purple': (
    1: #f7e4fb,
    10: #efcef3,
    20: #e4adea,
    30: #d68adf,
    40: #cb71d7,
    50: #c22dd5,
    60: #9320a2,
    70: #71237c,
    80: #501e58,
    90: #3b1a40
  ),
  'violet': (
    1: #ece8f5,
    10: #e2d2f4,
    20: #d2b5f0,
    30: #bf93eb,
    40: #b07ce8,
    50: #9753e1,
    60: #7732bb,
    70: #602797,
    80: #44216a,
    90: #321c4c
  ),
  'indigo': (
    1: #e9e8ff,
    10: #dcd4f7,
    20: #c7b6f7,
    30: #ae97f4,
    40: #9b82f3,
    50: #785ef0,
    60: #5a3ec8,
    70: #473793,
    80: #352969,
    90: #272149
  ),
  'gray': (
    1: #eaeaea,
    10: #d8d8d8,
    20: #c0bfc0,
    30: #a6a5a6,
    40: #949394,
    50: #777677,
    60: #595859,
    70: #464646,
    80: #343334,
    90: #272727
  ),
  'cool-gray': (
    1: #e3ecec,
    10: #d0dada,
    20: #b8c1c1,
    30: #9fa7a7,
    40: #8c9696,
    50: #6f7878,
    60: #535a5a,
    70: #424747,
    80: #343334,
    90: #272727
  ),
  'warm-gray': (
    1: #efe9e9,
    10: #e2d5d5,
    20: #ccbcbc,
    30: #b4a1a1,
    40: #9e9191,
    50: #7d7373,
    60: #5f5757,
    70: #4b4545,
    80: #373232,
    90: #2a2626
  ),
  'neutral-white': (
    1: #fcfcfc,
    2: #f9f9f9,
    3: #f6f6f6,
    4: #f3f3f3
  ),
  'cool-white': (
    1: #fbfcfc,
    2: #f8fafa,
    3: #f4f7f7,
    4: #f0f4f4
  ),
  'warm-white': (
    1: #fdfcfc,
    2: #fbf8f8,
    3: #f9f6f6,
    4: #f6f3f3
  ),
  'black': (
    100: #000
  ),
  'white': (
    0: #fff
  )
);