diff --git a/index.less b/index.less index 6eb643a..656680e 100644 --- a/index.less +++ b/index.less @@ -1,6 +1,6 @@ @import 'syntax-variables'; -atom-text-editor, :host { +.editor { background-color: @syntax-background-color; color: @syntax-text-color; @@ -48,12 +48,12 @@ atom-text-editor, :host { .gfm { .markup { &.heading { - color: #A6E22E; + color: @green; font-weight: bold; } &.underline { - color: #E6DB74; + color: @yellow; text-decoration: underline; } } @@ -67,103 +67,127 @@ atom-text-editor, :host { } .raw { - color: #66D9EF; + color: @blue; } .variable.list { - color: #F92672; + color: @pink; font-weight: bold; } .link { - color: #CCC; + color: @light-gray; .entity { - color: #AE81FF; + color: @purple; } } } } .comment { - color: #75715E; + color: @brown; } .constant { - color: #AE81FF; + &.character, + &.escape, + &.language, + &.numeric, + &.other { + color: @purple; + } } -.entity.name.class { - text-decoration: none; - color: #A6E22E; -} +.entity { + &.name.class { + text-decoration: none; + color: @green; + } -.entity.name.function { - color: #A6E22E; -} + &.name.function { + color: @green; + } -.entity.name.instance { - color: #66D9EF; -} + &.name.instance { + color: @blue; + } -.entity.name.tag { - color: #F92672; -} + &.name.tag { + color: @pink; + } -.entity.other.attribute-name { - color: #A6E22E; -} + &.other.attribute-name { + color: @green; + } -.entity.other.inherited-class { - font-style: italic; - text-decoration: none; - color: #A6E22E; + &.other.inherited-class { + font-style: italic; + text-decoration: none; + color: @green; + } } .invalid { - color: #F8F8F0; - background-color: #F92672; -} + color: @ghost-white; + background-color: @pink; -.invalid.deprecated { - color: #F8F8F0; - background-color: #AE81FF; + &.deprecated { + background-color: @purple; + } } .keyword { - color: #F92672; + color: @pink; } -.storage { - color: #F92672; +.meta.tag { + color: @syntax-text-color; } -.storage.type { - font-style: italic; - color: #66D9EF; +.storage { + color: @pink; + + &.type { + font-style: italic; + color: @blue; + } } .string { - color: #E6DB74; + color: @yellow; } -.support.constant { - color: #66D9EF; -} +.support { + &.constant, + &.function { + color: @blue; + } -.support.function { - color: #66D9EF; + &.class, + &.type { + font-style: italic; + color: @blue; + } } -.support.class, -.support.type { - font-style: italic; - color: #66D9EF; +.variable { + &.parameter { + font-style: italic; + color: @orange; + } + + // 'self' Python + &.language.python, + // 'this' Javascript + &.language.js { + color: @pink; + } } -.variable.parameter { - font-style: italic; - color: #FD971F; +// Jade syntax +.class.jade { + color: @purple; } // Prevent underlines from making their way into whitespace elements @@ -171,18 +195,3 @@ atom-text-editor, :host { .trailing-whitespace { display: inline-block; } - -// Jade syntax -.class.jade { - color: #AE81FF; -} - -// 'self' Python -.variable.language.python { - color: #F92672; -} - -// 'this' Javascript -.variable.language.js { - color: #F92672; -} diff --git a/styles/colors.less b/styles/colors.less new file mode 100644 index 0000000..faee654 --- /dev/null +++ b/styles/colors.less @@ -0,0 +1,18 @@ +// These colors are specific to the theme. Do not use in a package! + +@ghost-white: #F8F8F0; +@light-ghost-white: #F8F8F2; +@light-gray: #CCC; +@gray: #888; +@brown-gray: #49483E; +@dark-gray: #282828; + +@yellow: #E6DB74; +@blue: #66D9EF; +@pink: #F92672; +@purple: #AE81FF; +@brown: #75715E; +@orange: #FD971F; +@light-orange: #FFD569; +@green: #A6E22E; +@sea-green: #529B2F; diff --git a/styles/syntax-variables.less b/styles/syntax-variables.less index cacb055..9f9f611 100644 --- a/styles/syntax-variables.less +++ b/styles/syntax-variables.less @@ -1,8 +1,10 @@ +@import "colors"; + // General colors -@syntax-text-color: #F8F8F2; -@syntax-cursor-color: #F8F8F0; -@syntax-selection-color: #49483E; -@syntax-background-color: #282828; +@syntax-text-color: @light-ghost-white; +@syntax-cursor-color: @ghost-white; +@syntax-selection-color: @brown-gray; +@syntax-background-color: @dark-gray; // Guide colors @syntax-wrap-guide-color: rgba(255, 255, 255, .1); @@ -10,7 +12,7 @@ @syntax-invisible-character-color: rgba(197, 200, 198, .2); // For find and replace markers -@syntax-result-marker-color: #888; +@syntax-result-marker-color: @gray; @syntax-result-marker-color-selected: white; // Gutter colors @@ -20,7 +22,7 @@ @syntax-gutter-background-color-selected: @syntax-selection-color; // For git diff info. i.e. in the gutter -@syntax-color-renamed: #ffd569; -@syntax-color-added: #529b2f; -@syntax-color-modified: #E6DB74; -@syntax-color-removed: #F92672; +@syntax-color-renamed: @light-orange; +@syntax-color-added: @sea-green; +@syntax-color-modified: @yellow; +@syntax-color-removed: @pink;