Atom Stylesheet customizations for Markdown

styles.less

@import (reference) "syntax-variables";

// Markdown color improvements by fievelk
@yellow: #cbcb41;
@orange: #e37933;
@yellow-highlight: #a2852f;
@red: #cc3e44;
@green: #8dc149;
@blue: #519aba;
@purple: #a074c4;

@markup-heading: @orange;
@markup-h1: @markup-heading;
@markup-h2: lighten(@markup-heading, 5);
@markup-h3: lighten(@markup-heading, 10);
@markup-h4: lighten(@markup-heading, 15);
@markup-h5: lighten(@markup-heading, 20);
@markup-h6: lighten(@markup-heading, 25);

// These lines can be commented when using Seti Syntax Theme
@quotes: lighten(@blue, 20);
@code-background: black;
@string-quoted-single: @quotes;
@string-quoted-double: lighten(@blue, 20);
@meta-control-flow: @green;
// [END] These lines can be commented when using Seti Syntax Theme

atom-text-editor::shadow {
  // Styles shared between language-markdown and gfm packages
  .markup.md, .source.gfm {
     .heading-1 {
       color: @markup-h1;
     }
     .heading-2 {
       color: @markup-h2;
     }
     .heading-3 {
       color: @markup-h3;
     }
     .heading-4 {
       color: @markup-h4;
     }
     .heading-5 {
       color: @markup-h5;
     }
     .heading-6 {
       color: @markup-h6;
     }
   }

  .markup.md {
    &.bold {
      color: @yellow;
      font-weight: bold;
    }

    &.italic {
      color: @yellow;
      font-style: italic;
    }

    &.list {
      .punctuation {
        color: @yellow-highlight;
      }
    }

    &.code, .raw {
      color: @red;
      border: 1px solid mix(@code-background, @string-quoted-double, 90%);
      background-color: mix(@code-background, @string-quoted-double, 90%);
      border-radius: 3px;
    }

    &.link {
      .destination .uri {
        color: @green;
      }
      .string {
        color: @purple;
      }
    }
  }

  .source.gfm {
    .link {
      color: @green;
      .entity {
        color: @purple;
      }
    }

    .italic {
      color: @yellow;
    }
    .bold {
      color: @yellow;
      font-weight: bold;
    }
    .variable.list {
      color: @yellow-highlight;
    }

    .hr {
      color: @meta-control-flow;
    }

    .comment.quote {
      color: @string-quoted-single;
    }

    .raw {
      color: @red;
      border: 1px solid mix(@code-background, @string-quoted-double, 90%);
      background-color: mix(@code-background, @string-quoted-double, 90%);
      border-radius: 3px;
    }
  }
}