Colors

/* The color() SASS function takes a color and a shade and returns a hex value */

.my-element
  background-color: color("red", "base")
  color: color("yellow", "lighten-5")

/*
 * The following CSS is generated:
 * 
 * .my-element {
 *   background-color: #F44336;
 *   color: #fffde7;
 * }
 *
 */

// Similarly to the SASS function, the JavaScript function takes a color and a shade
// and returns a hex value. The default shade is 'base'.

import { color } from 'n2_styles';

console.log(color('red'));
// => "#F44336"

console.log(color('cyan', 'darken-1'));
// => "#00acc1"

# In Ruby, we have helper classes with methods that return a hex value for a given
# color and shade. They follow this pattern:
# N2Styles::Color::|color|.|shade|

N2Styles::Color::Red.base
# => "#F44336"

N2Styles::Color::Cyan.darken_1
# => "#00acc1"