@barguide/style-guide/src/variables/color.ts

BarGuide.io | CSS Style Guide

// Useful
const transparent = 'transparent';

// Roygbiv
const red = '#f00';
const orange = '#f70';
const yellow = '#fd0';
const green = '#0f0';
const blue = '#00f';
const indigo = '#8a2be2';
const violet = '#c77df3';

// Black, white and grays
const black = '#000';
const white = '#fff';
const gray = {
  '0': '#eee',
  '1': '#e5e5e5',
  '2': '#ccc',
  '3': '#b3b3b3',
  '4': '#999',
  '5': '#555',
  '6': '#444',
  '7': '#333',
  '8': '#222',
  '9': '#111'
};

const role = {
  link: blue,
  primary: red,
  secondary: gray[7]
};

const color = {
  transparent,

  // Black, white and grays
  black,
  gray,
  white,

  // Roygbiv
  red,
  orange,
  yellow,
  green,
  blue,
  indigo,
  violet,

  // Make these available on the "color" export
  ...role
};

export { color, gray, role };