Added a quick fix for tetrad array element selection bug.

tabuckner commented 5 years ago

@mbitson @fireflight1 @simon04 Discovered this while making a SASS adaptation of your approach. Thank you so much for making this open source! It's still not perfect, and might not look good for all colors, but I feel it's a closer approximation.

tinycolor.tetrad() returns an array with a length of 4. Targeting index [4] returns undefined. tinycolor.mix() does not complain about an undefined value for argument 2, but we're not correctly handling the mix approach.

Using @angular/material as a baseline, I tweaked the values to somewhat more closely match the mat-indigo palette.

// @angular/material mat-indigo palette
mat-indigo = {
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe
};

// new output with same base color
testMap = {
  50: #e8eaf6,
  100: #c5cbe9,
  200: #9fa8da,
  300: #7985cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #394aae,
  700: #3140a5,
  800: #29379d,
  900: #1b278d,
  A100: #88a6ff,
  A200: #4b79ff,
  A400: #3166ff,
  A700: #225aff
};

Mat-Indigo