Fixes issue #52 and merges PR #49

Manually rebased PR #49 from @radubogdan (thanks!) and put in the fix for issue #52. Also did a little more restructuring to make the layout of this theme a little more inline with other themes.
kevinsawicki · Aug 5, 2015 · 06a1feb · 06a1feb
1 parent d02ca9a
commit 06a1feb
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 78 deletions.
diff --git 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,122 +67,131 @@ 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
 .leading-whitespace,
 .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
@@ -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
@@ -1,16 +1,18 @@
+@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);
 @syntax-indent-guide-color: rgba(255, 255, 255, .15);
 @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;