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

BarGuide.io | CSS Style Guide

/* stylelint-disable */

:root {
  /** We have Black, White & 10% increments of grey */
  --spot-black: rgba(#000, 1);
  --spot-grey-9: rgba(#111, 1);
  --spot-grey-8: rgba(#222, 1);
  --spot-grey-7: rgba(#333, 1);
  --spot-grey-6: rgba(#444, 1);
  --spot-grey-5: rgba(#555, 1);
  --spot-grey-4: rgba(#999, 1);
  --spot-grey-3: rgba(#b3b3b3, 1);
  --spot-grey-2: rgba(#ccc, 1);
  --spot-grey-1: rgba(#e5e5e5, 1);
  --spot-grey-0: rgba(#eee, 1);
  --spot-white: rgba(#fff, 1);

  /** Secondary Colors ~ ROYGBIV ~ https://goo.gl/CcYD6Q */
  --spot-red: rgba(#f00, 1);
  --spot-red-alt: rgba(#a10, 1);
  --spot-orange: rgba(#f70, 1);
  --spot-orange-alt: rgba(#f40, 1);
  --spot-yellow: rgba(#fd0, 1);
  --spot-yellow-alt: rgba(#fb1, 1);
  --spot-green: rgba(#0f0, 1);
  --spot-green-alt: rgba(#5a0, 1);
  --spot-blue: rgba(#00f, 1);
  --spot-blue-alt: rgba(#005, 1);
  --spot-indigo: rgba(#8a2be2, 1);
  --spot-indigo-alt: rgba(#310062, 1);
  --spot-violet: rgba(#c77df3, 1);
  --spot-violet-alt: rgba(#4b0082, 1);

  /** Primary / Brand Colors */
  --spot-primary: var(--spot-red);
  --spot-primary-alt: var(--spot-red);
  --spot-secondary: var(--spot-grey-9);
  --spot-secondary-alt: var(--spot-grey-9);

  /** Lighter `halos` for our inputs */
  --spot-focus-ring: rgba(#555, .2);
  --spot-focus-ring-secondary: rgba(#6495ed, .5);
}