index.less

@import 'syntax-variables';

atom-text-editor {
  background-color: @syntax-background-color;
  color: @syntax-text-color;

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

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

  .wrap-guide {
    background-color: @syntax-wrap-guide-color;
  }

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

  .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 {
    .syntax--markup {
      &.syntax--heading {
        color: @green;
        font-weight: bold;
      }

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

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

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

    .syntax--raw {
      color: @blue;
    }

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

    .syntax--link {
      color: @light-gray;

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

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

.syntax--constant {
  &.syntax--character,
  &.syntax--language,
  &.syntax--numeric,
  &.syntax--other {
    color: @purple;
  }
}

.syntax--entity {
  &.syntax--name.syntax--class {
    text-decoration: none;
    color: @green;
  }

  &.syntax--name.syntax--function {
    color: @green;
  }

  &.syntax--name.syntax--instance {
    color: @blue;
  }

  &.syntax--name.syntax--tag {
    color: @pink;
  }

  &.syntax--other.syntax--attribute-name {
    color: @green;
  }

  &.syntax--other.syntax--inherited-class {
    font-style: italic;
    text-decoration: none;
    color: @green;
  }
}

.syntax--invalid {
  color: @ghost-white;
  background-color: @pink;

  &.syntax--deprecated {
    background-color: @purple;
  }
}

.syntax--keyword {
  color: @pink !important;
}

.syntax--meta.syntax--tag {
  color: @syntax-text-color;
}

.syntax--storage {
  color: @pink;

  &.syntax--type {
    font-style: italic;
    color: @blue;
  }
}

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

.syntax--support {
  &.syntax--constant,
  &.syntax--function {
    color: @blue;
  }

  &.syntax--class,
  &.syntax--type {
    font-style: italic;
    color: @blue;
  }
}

.syntax--variable {
  &.syntax--parameter {
    font-style: italic;
    color: @orange;
  }

  // 'self' Python
  &.syntax--language.syntax--python,
  // 'this' Javascript
  &.syntax--language.syntax--js {
    color: @pink;
  }
}

// Jade syntax
.syntax--class.syntax--jade {
  color: @purple;
}

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

.syntax--js {
  .syntax--template {
    .syntax--element {
      .syntax--quasi.syntax--begin, .syntax--quasi.syntax--end, .syntax--language {
        color: @pink;
      }

      .syntax--variable, .syntax--brace, .syntax--comma {
        color: @syntax-text-color;
      }

      .syntax--constant {
        color: @purple;
      }
    }
  }
}

.syntax--json {
  .syntax--key {
    .syntax--string {
      color: #a6e22e;
    }
  }
}