colors.html

<link rel="import" href="../polymer/polymer.html">

<style is="custom-style">
  :root {

    /* Default primary UI colour
       User configurable to change all elements */
    --simpla-primary-color: var(--simpla-blue);

    /* White/Black opacities */
    --simpla-light-black: rgba(0,0,0,0.12);
    --simpla-med-black: rgba(0,0,0,0.45);
    --simpla-dark-black: rgba(0,0,0,0.7);

    --simpla-light-white: rgba(255,255,255, 0.25);
    --simpla-med-white: rgba(255,255,255,0.7);
    --simpla-bright-white: rgba(255,255,255,0.85);

    /* Greyscale */
    --simpla-grey-50: #f8f9fb;
    --simpla-grey-100: #f4f5f6;
    --simpla-grey-300: #e5e8ec;
    --simpla-grey-500: #b2bcc8;
    --simpla-grey-700: #767d85;

    /* Colors */
    --simpla-text-color: #303c46;
    --simpla-blue: #1bd4dc;
    --simpla-green: #18c48b;
    --simpla-yellow: #ffeb3b;
    --simpla-orange: #f1c40f;
    --simpla-red: #f44336;

  }
</style>