Repository: atom-material/atom-material-syntax
Branch: master
Commit: 25e62e24db06
Files: 17
Total size: 16.9 KB

Directory structure:
gitextract_qk0t1695/

├── .gitignore
├── LICENSE.md
├── README.md
├── index.less
├── package.json
└── styles/
    ├── base.less
    ├── colors.less
    ├── languages/
    │   ├── babel.less
    │   ├── css.less
    │   ├── gfm.less
    │   ├── html.less
    │   ├── javascript.less
    │   ├── json.less
    │   ├── php.less
    │   ├── python.less
    │   └── ruby.less
    └── syntax-variables.less

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
npm-debug.log
node_modules
snippets/


================================================
FILE: LICENSE.md
================================================
Copyright (c) 2017 Silvestre Herrera

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
![](http://i.imgur.com/f58FC9u.png)
---

A syntax theme for [Atom Material UI](https://github.com/silvestreh/atom-material-ui). Inspired by Mattia Astorino's [SublimeText theme](https://github.com/equinusocio/material-theme).

![screenshot](http://i.imgur.com/3YQeDps.png)


================================================
FILE: index.less
================================================
@import "styles/base";

// Languages
@import (less) "styles/languages/babel";
@import (less) "styles/languages/css";
@import (less) "styles/languages/gfm";
@import (less) "styles/languages/html";
@import (less) "styles/languages/javascript";
@import (less) "styles/languages/json";
@import (less) "styles/languages/php";
@import (less) "styles/languages/python";
@import (less) "styles/languages/ruby";


================================================
FILE: package.json
================================================
{
  "name": "atom-material-syntax",
  "theme": "syntax",
  "version": "1.0.8",
  "description": "A dark syntax theme for Atom that uses Google's Material Design color palette",
  "keywords": [
    "syntax",
    "theme",
    "material",
    "material design"
  ],
  "repository": "https://github.com/silvestreh/atom-material-syntax",
  "license": "MIT",
  "engines": {
    "atom": ">=1.13.0 <2.0.0"
  }
}


================================================
FILE: styles/base.less
================================================
@import "syntax-variables";

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

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

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

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

    .cursor-line {
        background-color: fade(darken(@syntax-background-color, 20%), 20%);
    }

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

        .line-number {
            &.cursor-line {
                background-color: darken(@syntax-background-color, 2.5%);
                color: @syntax-gutter-text-color-selected;
            }

            &.cursor-line-no-selection {
                color: @syntax-gutter-text-color-selected;
            }
        }
    }

    .fold-marker:after,
    .gutter .line-number.folded,
    .gutter .line-number:after {
        color: @light-gray;
    }

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

    .cursor {
        color: @syntax-cursor-color;
        border-width: 2px;
    }

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

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

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

// Syntax styles
.syntax--comment {
    color: @syntax-comment-color;
}

.syntax--keyword {
    color: @purple;

    &.syntax--control {
        color: @purple;

        &.syntax--elements {
            color: @light-gray;
        }
    }

    &.syntax--operator {
        color: @cyan;
    }

    &.syntax--other.syntax--special-method {
        color: @blue;
    }

    &.syntax--other.syntax--unit {
        color: @orange;
    }
}

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

.syntax--constant {
    color: @red;

    &.syntax--character.syntax--escape {
        color: @cyan;
    }

    &.syntax--numeric {
        color: @strong-orange;
    }

    &.syntax--other.syntax--color {
        color: @cyan;
    }

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

    &.syntax--language.syntax--null {
        color: @pink;
    }
}

.syntax--variable {
    color: @very-light-gray;

    &.syntax--interpolation {
        color: darken(@red, 10%);
    }

    &.syntax--parameter.syntax--function {
        color: @strong-orange;
    }

    &.syntax--language {
        color: @pink;
    }

    &.syntax--variable {
        &.syntax--object {
            color: @orange;
        }
    }
}

.syntax--invalid.syntax--illegal {
    background-color: @red;
    color: @syntax-background-color;
}

.syntax--string {
    color: @green;

    &.syntax--regexp {
        color: @cyan;

        .syntax--source.syntax--ruby.syntax--embedded {
            color: @orange;
        }
    }

    &.syntax--other.syntax--link {
        color: @red;
    }
}

.syntax--punctuation {
    &.syntax--definition {
        &.syntax--comment {
            color: @syntax-comment-color;
        }

        &.syntax--array,
        &.syntax--parameters,
        &.syntax--string,
        &.syntax--variable {
            color: @syntax-text-color;

            &.syntax--begin, &.syntax--end {
                color: @cyan;
            }
        }

        &.syntax--heading,
        &.syntax--identity {
            color: @blue;
        }

        &.syntax--bold {
            color: @light-orange;
            font-weight: bold;
        }

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

        &.syntax--entity {
            color: @cyan;
        }
    }

    &.syntax--section {
        &.syntax--array {
            color: @cyan;
        }

        &.syntax--embedded {
            color: @cyan;
        }
    }

    &.syntax--separator {
        &.syntax--key-value {
            color: @cyan;
        }
    }

    &.syntax--terminator {
        color: @cyan;
    }
}

.syntax--support {
    &.syntax--class {
        color: @orange;
    }

    &.syntax--function {
        color: @blue;

        &.syntax--any-method {
            color: @blue;
        }
    }

    &.syntax--type {
        color: @orange;
    }

    &.syntax--variable {
        &.syntax--dom {
            color: @orange;
        }
    }
}

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

        &.syntax--type {
            color: @very-light-gray;
        }
    }

    &.syntax--other {
        &.syntax--inherited-class {
            color: @green;
        }

        &.syntax--attribute-name {
            &.syntax--pseudo-element {
                color: @purple;
            }

            &.syntax--attribute {
                color: @purple;
            }
        }
    }

    &.syntax--name.syntax--class,
    &.syntax--name.syntax--type.syntax--class {
        color: @orange;
    }

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

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

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

.syntax--meta {
    &.syntax--class {
        color: @light-orange;
    }

    &.syntax--delimiter {
        &.syntax--period {
            color: @cyan;
        }
    }

    &.syntax--link {
        color: @orange;
    }

    &.syntax--require {
        color: @blue;
    }

    &.syntax--selector {
        color: @purple;
    }

    &.syntax--separator {
        background-color: @gray;
        color: @syntax-text-color;
    }

    &.syntax--brace {
        &.syntax--round, &.syntax--square {
            color: @cyan;
        }
    }
}

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

.syntax--markup {
    &.syntax--bold {
        color: @orange;
        font-weight: bold;
    }

    &.syntax--changed {
        color: @purple;
    }

    &.syntax--deleted {
        color: @red;
    }

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

    &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
        color: @blue;
    }

    &.syntax--inserted {
        color: @green;
    }

    &.syntax--list {
        color: @red;
    }

    &.syntax--quote {
        color: @orange;
    }

    &.syntax--raw.syntax--inline {
        color: @green;
    }
}

.syntax--source.syntax--gfm .syntax--markup {
    -webkit-font-smoothing: auto;

    &.syntax--heading {
        color: @green;
    }
}

// Mini editor
atom-text-editor[mini] .scroll-view {
    padding-left: 1px;
}

// Bracket Matcher
atom-text-editor {
    .highlight .region.bracket-matcher {
        z-index: inherit;
    }
}

.bracket-matcher .region {
    border-bottom: 1px solid @syntax-cursor-color;
    box-sizing: border-box;
    background-color: fade(@syntax-text-color, 10%);
    box-shadow: inset 0 -1px 0 @syntax-cursor-color;
}

// Misspelled word
atom-text-editor .spell-check-misspelling .region {
    z-index: auto;
}


================================================
FILE: styles/colors.less
================================================
// These colors are specific to the theme. Do not use in a package!

@very-light-gray:   #EEFFFF;
@light-gray:        #B2CCD6;
@gray:              #373b41;
@dark-gray:         #282a2e;
@very-dark-gray:    #263238;

@green:             #C3E88D;
@teal:              #009688;
@light-teal:        #73d1c8;
@cyan:              #89DDF3;
@blue:              #82AAFF;
@indigo:            #7986CB;
@purple:            #C792EA;
@pink:              #FF5370;
@red:               #F07178;
@strong-orange:     #F78C6A;
@orange:            #FFCB6B;
@light-orange:      #FFE082;


================================================
FILE: styles/languages/babel.less
================================================
.syntax--jsx {
    &.syntax--component {
        color: @red;
    }
}

atom-text-editor {
    // Over-nesting to override `language-babel` default styles.
    .syntax--source.syntax--js.syntax--jsx {
        .syntax--jsx {
            .syntax--entity.syntax--other.syntax--attribute-name {
                font-style: normal;
            }
        }
    }
}


================================================
FILE: styles/languages/css.less
================================================
.syntax--css {
    .syntax--support {
        &.syntax--constant {
            color: @cyan;
        }

        &.syntax--property-name {
            color: @light-teal;
        }
    }

    .syntax--keyword {
        &.syntax--unit {
            color: @strong-orange;
        }
    }

    .syntax--constant {
        &.syntax--numeric {
            color: @light-orange;
        }

        &.syntax--color {
            color: @light-orange;

            .syntax--punctuation {
                color: currentColor;
            }
        }
    }

    .syntax--entity {
        &.syntax--tag {
            color: @light-gray;
        }

        &.syntax--id {
            color: @purple;
        }
    }

    .syntax--punctuation {
        &.syntax--delimiter {
            color: @cyan;

            + .syntax--constant.syntax--numeric:not(.syntax--color) {
                color: @strong-orange;
            }
        }
    }
}


================================================
FILE: styles/languages/gfm.less
================================================
[data-grammar*="gfm"] {
    .syntax--markup.syntax--underline.syntax--link {
        color: lighten(@pink, 10%);

        span.syntax--punctuation {
            color: @pink;
        }
    }
    .syntax--markup.syntax--strike {
        position: relative;
        color: fade(@syntax-text-color, 50%);

        &::after {
            content: "";
            position: absolute;
            top: calc(50% + 4px);
            left: 0;
            right: 0;
            height: 1px;
            background-color: fade(@syntax-text-color, 50%);
        }
    }
    .syntax--table .syntax--border {
        color: fade(@syntax-text-color, 50%);
    }
    .syntax--markup.syntax--heading {
        color: @blue;
    }
    .syntax--punctuation.syntax--definition.syntax--begin,
    .syntax--punctuation.syntax--definition.syntax--end {
        color: @blue;
    }
    .syntax--punctuation.syntax--definition.syntax--begin + span:not(.syntax--function.syntax--parameter) {
        color: lighten(@blue, 5%);
    }
}


================================================
FILE: styles/languages/html.less
================================================
.syntax--html, .syntax--jsx {
    .syntax--meta {
        &.syntax--tag {
            &.syntax--doctype {
                color: @purple;
            }
        }
    }

    .syntax--punctuation {
        &.syntax--tag {
            color: @cyan;
        }
    }
}


================================================
FILE: styles/languages/javascript.less
================================================
.syntax--js {
    &.syntax--constant {
        color: @very-light-gray;
    }

    &.syntax--support {
        &.syntax--variable {
            &.syntax--property {
                color: @very-light-gray;
            }
            &.syntax--property.syntax--dom {
                color: @blue;
            }
        }
    }

    &.syntax--entity {
        &.syntax--name {
            &.syntax--type {
                color: @orange;
            }
        }
    }

    &.syntax--variable {
        &.syntax--property {
            color: @blue;
        }
        &.syntax--other.syntax--object {
            color: @very-light-gray;
        }
        &.syntax--other.syntax--object.syntax--property {
            color: @blue;
        }
    }

    &.syntax--string.syntax--quoted.syntax--template {
      .syntax--other.syntax--object.syntax--property {
          color: @green;
      }
    }

    &.syntax--constant {
        &.syntax--numeric {
            color: @strong-orange;
        }

        &.syntax--boolean {
            color: @red;
        }
    }

    &.syntax--punctuation.syntax--begin,
    &.syntax--punctuation.syntax--end,
    &.syntax--delimiter.syntax--object.syntax--comma,
    &.syntax--brace.syntax--curly {
        color: @cyan;

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

    &.syntax--export .syntax--variable.syntax--default {
        color: @purple;
    }
}


================================================
FILE: styles/languages/json.less
================================================
.syntax--json {
  .syntax--meta.syntax--structure.syntax--dictionary.syntax--json {
    & > .syntax--string.syntax--quoted.syntax--json {
      & > .syntax--punctuation.syntax--string {
        color: @purple;
      }
      color: @purple;
    }
  }

  .syntax--meta.syntax--structure.syntax--dictionary.syntax--json, .syntax--meta.syntax--structure.syntax--array.syntax--json {
    & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json,
    & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json > .syntax--punctuation {
      color: @green;

      &.syntax--punctuation {
          &.syntax--begin, &.syntax--end {
              color: @cyan;
          }
      }
    }
  }
}


================================================
FILE: styles/languages/php.less
================================================
.syntax--php {
    &.syntax--keyword {
        &.syntax--operator {
            &.syntax--assignment {
                color: @purple;
            }
        }
    }

    &.syntax--meta {
        &.syntax--object {
            color: @blue;
        }

        &.syntax--arguments {
            color: @purple;
        }
    }
}


================================================
FILE: styles/languages/python.less
================================================
.syntax--python {
    .syntax--meta {
        &.syntax--function-call {
            color: @blue;

            .syntax--punctuation {
                color: @cyan;
            }

            .syntax--arguments {
                color: @indigo;

                &.syntax--punctuation {
                    color: @cyan;
                }
            }
        }
    }

    .syntax--variable {
        &.syntax--self {
            color: @pink;
        }
    }

    .syntax--meta {
        .syntax--punctuation {
            &.syntax--inheritance, &.syntax--section {
                color: @cyan;
            }
        }
    }

    .syntax--variable {
        &.syntax--parameter {
            color: @cyan;
        }
    }

    .syntax--keyword {
        &.syntax--operator {
            color: @purple;
        }
    }
}


================================================
FILE: styles/languages/ruby.less
================================================
.syntax--ruby {
    .syntax--punctuation {
        &.syntax--separator {
            color: @cyan;
        }
    }

    .syntax--variable {
        &.syntax--block {
            color: @red;
        }

        &.syntax--instance {
            color: @red;

            .syntax--punctuation {
                color: currentColor;
            }
        }
    }
}


================================================
FILE: styles/syntax-variables.less
================================================
@import "colors";

// This defines all syntax variables that syntax themes must implement when they
// include a syntax-variables.less file.

// General colors
@syntax-text-color: @very-light-gray;
@syntax-cursor-color: @teal;
@syntax-selection-color: lighten(@syntax-background-color, 10%);
@syntax-background-color: @very-dark-gray;
@syntax-comment-color: lighten(@very-dark-gray, 20%);

// Guide colors
@syntax-wrap-guide-color: @dark-gray;
@syntax-indent-guide-color: lighten(@syntax-background-color, 2.5%);
@syntax-invisible-character-color: @gray;

// For find and replace markers
@syntax-result-marker-color: @light-gray;
@syntax-result-marker-color-selected: white;

// Gutter colors
@syntax-gutter-text-color: fade(@syntax-text-color, 20%);
@syntax-gutter-text-color-selected: @syntax-gutter-text-color;
@syntax-gutter-background-color: @syntax-background-color;
@syntax-gutter-background-color-selected: darken(@syntax-background-color, 5%);

// For git diff info. i.e. in the gutter
@syntax-color-renamed: @blue;
@syntax-color-added: @green;
@syntax-color-modified: @orange;
@syntax-color-removed: @red;