module.exports = {
  gutterWidth: 32,

  font: 'Roboto',

  nodeSizes: {
    parent: 120,
    contextAgent: 80,
    default: 40
  },

  graphSize: {
    width: 700,
    height: 700
  },

  colors: {
    mediumGray: '#707070',
    black: 'black',
    lightGrey: '#f5f5f5',
    charcoal: '#333333',
    gray: '#999999',
    ashGray: '#cccccc',
    silver: '#e9e9e9',
    brown: '#815b3a',
    cheetoorange: '#f79232',
    tan: '#f1a257',
    lightBrown: '#d39c3f',
    cyan: '#59afe1',
    slate: '#4a6785',
    coolBlue: '#84bbc6',
    limeBreen: '#8eb021',
    midGreen: '#67ab49',
    violet: '#654982',
    mauve: '#ac707a',
    brightPink: '#f15c75',
    rosie: '#f691b2'
  },

  //all of these appropriate as the background for black text
  //http://leaverou.github.io/contrast-ratio/
  lightBackground: [
    '#f5f5f5', //lightGrey
    '#ebf2f9', //pale blue
    '#14892c', //green
    '#f6c342', //yellow
    '#d04437', //red
    '#59afe1', //cyan
    '#d39c3f', //lightBrown
    '#f691b2', //rosie
    '#ac707a' //mauve
  ],

  nodesAndLinks: [
    '#707070', //grey
    '#3572b0', //blue
    // '#14892c', //green
    '#d04437', //red
    '#815b3a', //brown
    '#654982', //violet
  ],

  roleIcons: [
    'star-outline',
    'triangle-outline',
    'circle-outline',
    'square-outline'
  ],

  overlay: {
    darken: 'rgba(0,0,0,0.12)'
  },

  fontSize: {
    button: {
      large: 17,
      medium: 14
    }
  }
}

@@ -51,16 +51,56 @@
 boto',%0A%0A
+  transition: %7B%0A    duration: 800%0A  %7D,%0A%0A
   nodeSi

add transition uration to vars