index.less

@import 'syntax-variables';

// variable override
@bg-color: #22282A;
@text-color: #d0d0d0;
@text-color-gfm: fade(@text-color, 70%);
@string-color: #2aa198;
@constant-color: #dc322f;
@comment-color: fade(@text-color, 50%);
@variable-color: #FD971F;
@list-color-gfm: fade(#F92672, 80%);
@hr-color-gfm: #268BD2;

// mac
.platform-darwin {
  atom-text-editor, atom-text-editor {
    line-height:1.3em;
    font-family: Menlo;
  }
}

// win
.platform-win32 {
atom-text-editor, atom-text-editor {
    line-height:1.3em;
    font-family: consolas;
  }
}

atom-text-editor, atom-text-editor {
  background-color: @bg-color;
  color: @text-color;

  .invisible-character {
    color: @syntax-invisible-character-color;
  }

  .indent-guide {
    color: @syntax-indent-guide-color;
  }

  .wrap-guide {
    border-left: 1px dashed @syntax-wrap-guide-color;
    width:0;
  }

  .gutter {
    background-color: @syntax-gutter-background-color;

    .cursor-line {
      background-color: @syntax-gutter-background-color-selected;
    }
  }

  .line-number.cursor-line-no-selection {
    background-color: @syntax-gutter-background-color-selected;
  }

  .invisible {
    color: @syntax-text-color;
  }

  .cursor {
    border-color: @syntax-cursor-color;
  }

  .selection .region {
    background-color: @syntax-selection-color;
  }

  .search-results .syntax--marker .region {
    background-color: transparent;
    border: 1px solid @syntax-result-marker-color;
  }

  .search-results .syntax--marker.current-result .region {
    border: 1px solid @syntax-result-marker-color-selected;
  }

  .syntax--gfm {
    color: @text-color-gfm;

    // >this is quote
    .syntax--quote {
      color: @string-color;
    }

    .syntax--markup {
      &.syntax--heading {
        color: @constant-color;
        // font-weight: bold;
      }

      &.syntax--underline {
        color: @comment-color;
        text-decoration: underline;
      }
    }

    .syntax--bold {
      font-weight: bold;
    }

   .syntax--italic {
      font-style: italic;
    }

    // `this is row`
   .syntax--raw {
      color: @string-color;
    }

    .syntax--variable.syntax--list {
      color: @list-color-gfm;
      font-weight: bold;
    }

   .syntax--link {
      color: @comment-color;

      .syntax--entity {
        color: @variable-color;
      }
    }

    .syntax--hr {
      color: @hr-color-gfm;
    }
  }
}

.syntax--comment {
  color: @comment-color;
}

.syntax--string{
  color: @string-color;
}

.syntax--constant.syntax--numeric {
  color: #AE81FF;
}

.syntax--constant.syntax--language {
  color: #AE81FF;
}

.syntax--constant.syntax--character,
.syntax--constant.syntax--escape,
.syntax--constant.syntax--other {
  color: @constant-color;
}

.syntax--keyword {
  color: #F92672;
}

.syntax--keyword.syntax--operator.syntax--bracket,
.syntax--keyword.syntax--operator.syntax--punctuation,
 {
  color: #FFFFFF;
}

.syntax--storage {
  color: #F92672;
}

.syntax--storage.syntax--type {
  font-style: italic;
  color: #66D9EF;
}

.syntax--entity.syntax--name.syntax--class {
  text-decoration: none;
  color: #A6E22E;
}

.syntax--entity.syntax--other.syntax--inherited-class {
  font-style: italic;
  text-decoration: none;
  color: #A6E22E;
}

// Prevent underlines from making their way into whitespace elements
.leading-whitespace,
.trailing-whitespace {
  display: inline-block;
}

.syntax--entity.syntax--name.syntax--function {
  color: #A6E22E;
}

.syntax--entity.syntax--name.syntax--instance {
  color: #66D9EF;
}

// AZ variable same color as parameter
.syntax--variable {
  color: #FD971F;
}

.syntax--variable.syntax--parameter {
  font-style: italic;
  color: #FD971F;
}

.syntax--entity.syntax--name.syntax--tag {
  color: #F92672;
}

.syntax--entity.syntax--other.syntax--attribute-name {
  color: #A6E22E;
}

.syntax--support.syntax--function {
  color: #66D9EF;
}

.syntax--support.syntax--function.syntax--decl {
  color: #A6E22E;
}

.syntax--support.syntax--constant {
  color: #66D9EF;
}

.syntax--support.syntax--type,
.syntax--support.syntax--class {
  font-style: italic;
  color: #66D9EF;
}

.syntax--invalid {
  color: #F8F8F0;
  background-color: #F92672;
}

.syntax--invalid.syntax--deprecated {
  color: #F8F8F0;
  background-color: #AE81FF;
}

// Jade syntax
.syntax--class.syntax--jade {
  color: #AE81FF;
}

// 'this' Javascript
.syntax--variable.syntax--language.syntax--js {
  color: #F92672;
}