diff --git a/packages/atom-dark-syntax/index.less b/packages/atom-dark-syntax/index.less
index 63ce04e4ed1..161afc86285 100644
--- a/packages/atom-dark-syntax/index.less
+++ b/packages/atom-dark-syntax/index.less
@@ -4,4 +4,8 @@
 @import "styles/syntax-variables.less";
 
 @import "styles/editor.less";
-@import "styles/syntax.less";
+@import "styles/syntax-legacy/_base.less";
+
+@import "styles/syntax/base.less";
+@import "styles/syntax/css.less";
+@import "styles/syntax/html.less";
diff --git a/packages/atom-dark-syntax/styles/syntax.less b/packages/atom-dark-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/atom-dark-syntax/styles/syntax.less
rename to packages/atom-dark-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/atom-dark-syntax/styles/syntax/base.less b/packages/atom-dark-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..d5a78947e81
--- /dev/null
+++ b/packages/atom-dark-syntax/styles/syntax/base.less
@@ -0,0 +1,267 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return
+.syntax--keyword {
+  color: #96CBFE;
+
+  // global let def class
+  &.syntax--storage {
+    color: #96CBFE;
+  }
+
+  // int char float
+  &.syntax--type {
+    color: #FFFFB6;
+  }
+
+  // and del not
+  &.syntax--operator {
+    color: #96CBFE;
+  }
+
+  // super
+  &.syntax--function {
+    color: #C6C5FE;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: #C6C5FE;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: #EDEDED;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: #C5C8C6;
+
+  // variable
+  &.syntax--variable {
+    color: #C5C8C6;
+  }
+
+  // self cls iota
+  &.syntax--support {
+    color: #C6C5FE;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: #FFD2A7;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // import package
+  &.syntax--package {
+    color: #FFD2A7;
+  }
+
+  // function method
+  &.syntax--function {
+    color: #FFD2A7;
+  }
+
+  // add
+  &.syntax--operator {
+    color: #FFD2A7;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: #EDEDED;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: #FFFFB6;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: #96CBFE;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: #FF73FD;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: #C5C8C6;
+
+  // . ->
+  &.syntax--accessor.syntax--member {
+    color: #EDEDED;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: #A8FF60;
+
+  // :immutable
+  &.syntax--immutable {
+    color: #A8FF60;
+  }
+
+  // ${variable} %().2f
+  &.syntax--part {
+    color: #00A0A0;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: #A8FF60;
+
+    &.syntax--group {
+      color: #A8FF60;
+      background-color: @syntax-background-color;
+    }
+
+    // \g \"
+    .syntax--constant.syntax--character.syntax--escape {
+      color: #A8FF60;
+
+      // \n \W \d .
+      &.syntax--code {
+        color: #00A0A0;
+      }
+    }
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: #96CBFE;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: #C5C8C6;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: #E9C062;
+    }
+  }
+}
+
+// literal true nil
+.syntax--constant {
+  color: #FF73FD;
+
+  // 4 1.3 Infinity
+  &.syntax--numeric {
+    color: #FF73FD;
+  }
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: #A8FF60;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: #A8FF60;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: #00A0A0;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: #C5C8C6;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: #eee;
+  }
+
+  // - item
+  &.syntax--list {
+    color: #555;
+  }
+
+  // > quote
+  &.syntax--quote {
+    color: #555;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: #aaa;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: #555;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: #ddd;
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: #8A8A8A;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(#8A8A8A, 6);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(#8A8A8A, 9);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: #8A8A8A;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: #FD5FF1 !important;
+    background-color: rgba(86, 45, 86, 0.75) !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: #FD5FF1 !important;
+    text-decoration: underline !important;
+  }
+}
diff --git a/packages/atom-dark-syntax/styles/syntax/css.less b/packages/atom-dark-syntax/styles/syntax/css.less
new file mode 100644
index 00000000000..20b8ccbe0e2
--- /dev/null
+++ b/packages/atom-dark-syntax/styles/syntax/css.less
@@ -0,0 +1,106 @@
+.syntax--source.syntax--css {
+
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: #C5C8C6;
+
+      // url rgb
+      &.syntax--support {
+        color: #DAD085;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: #FF73FD;
+
+      // div span
+      &.syntax--tag {
+        color: #96CBFE;
+        text-decoration: underline;
+      }
+
+      // #id
+      &.syntax--id {
+        color: #8B98AB;
+      }
+
+      // .class
+      &.syntax--class {
+        color: #62B1FE;
+      }
+    }
+
+    // property: constant
+    &.syntax--property {
+
+      // height position border
+      &.syntax--support {
+        color: #EDEDED;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: #C6C5FE;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: #C6C5FE;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
+    color: #C5C8C6;
+
+    // flex solid bold
+    &.syntax--support {
+      color: #F9EE98;
+    }
+
+    // 4 1.3
+    &.syntax--numeric {
+      color: #99CC99;
+
+      // px % cm hz
+      &.syntax--unit {
+        color: #99CC99;
+      }
+    }
+
+    // screen print
+    &.syntax--media {
+      color: #FFD2A7;
+    }
+
+    // #b294bb blue red
+    &.syntax--color {
+      color: #99CC99;
+    }
+
+    // from to 50%
+    &.syntax--offset {
+      color: #FFD2A7;
+
+      // %
+      &.syntax--unit {
+        color: #FFD2A7;
+      }
+    }
+  }
+
+  // . : :: # [] ()
+  .syntax--punctuation {
+    color: #C5C8C6;
+
+    // *
+    &.syntax--wildcard {
+      color: #96CBFE;
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/packages/atom-dark-syntax/styles/syntax/html.less b/packages/atom-dark-syntax/styles/syntax/html.less
new file mode 100644
index 00000000000..505cc623336
--- /dev/null
+++ b/packages/atom-dark-syntax/styles/syntax/html.less
@@ -0,0 +1,18 @@
+.syntax--source.syntax--html {
+
+  .syntax--punctuation {
+
+    // < />
+    &.syntax--tag {
+      color: #96CBFE;
+    }
+  }
+
+  .syntax--meta {
+
+    // <!doctype html>
+    &.syntax--doctype {
+      color: #8A8A8A;
+    }
+  }
+}
diff --git a/packages/atom-light-syntax/index.less b/packages/atom-light-syntax/index.less
index 7a0dac1d3d9..d86a25ba215 100644
--- a/packages/atom-light-syntax/index.less
+++ b/packages/atom-light-syntax/index.less
@@ -4,4 +4,7 @@
 @import "styles/syntax-variables.less";
 
 @import 'styles/editor.less';
-@import 'styles/syntax.less';
+@import 'styles/syntax-legacy/_base.less';
+
+@import "styles/syntax/base.less";
+@import "styles/syntax/css.less";
diff --git a/packages/atom-light-syntax/styles/syntax.less b/packages/atom-light-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/atom-light-syntax/styles/syntax.less
rename to packages/atom-light-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/atom-light-syntax/styles/syntax/base.less b/packages/atom-light-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..b17aba40a4a
--- /dev/null
+++ b/packages/atom-light-syntax/styles/syntax/base.less
@@ -0,0 +1,232 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for and del = &&
+.syntax--keyword {
+  color: #222;
+  font-weight: bold;
+
+  // global let def class
+  &.syntax--storage {
+    color: #222;
+    font-weight: bold;
+  }
+
+  // int char float
+  &.syntax--type {
+    color: #458;
+    font-weight: normal;
+  }
+
+  // super
+  &.syntax--function {
+    color: #008080;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: #008080;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: #555;
+
+  // function(parameter)
+  &.syntax--parameter {
+    color: #555;
+  }
+
+  // self cls iota
+  &.syntax--support {
+    color: #008080;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: #900;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: #900;
+  }
+
+  // add
+  &.syntax--operator {
+    color: #900;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: #555;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: #458;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: #008080;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: #458;
+    font-weight: bold;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+
+  // . ->
+  &.syntax--accessor.syntax--member {
+    color: #222;
+    font-weight: bold;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: #D14;
+
+  // :immutable
+  &.syntax--immutable {
+    color: #D14;
+  }
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: #606aa1;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: #222;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: #D14;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: #222;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: #008080;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: #222;
+    }
+  }
+}
+
+// literal 4 1.3
+.syntax--constant {
+  color: #D14;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: #D14;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: #D14;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: #606aa1;
+    }
+  }
+
+  // true false nil
+  &.syntax--language {
+    color: #D14;
+  }
+}
+
+// text
+.syntax--text {
+  color: #555;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: #111;
+  }
+
+  // 1. * -
+  &.syntax--list.syntax--punctuation {
+    color: #888;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: #888;
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: #999988;
+  font-style: italic;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(#999988, 6);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(#999988, 9);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: #999988;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: #F8F8F0 !important;
+    background-color: #00A8C6 !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: #F8F8F0 !important;
+    background-color: #8FBE00 !important;
+  }
+}
diff --git a/packages/atom-light-syntax/styles/syntax/css.less b/packages/atom-light-syntax/styles/syntax/css.less
new file mode 100644
index 00000000000..23fe60587fe
--- /dev/null
+++ b/packages/atom-light-syntax/styles/syntax/css.less
@@ -0,0 +1,108 @@
+.syntax--source.syntax--css {
+
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: #555;
+
+      // url rgb
+      &.syntax--support {
+        color: #458;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: #458;
+      font-weight: bold;
+
+      // div span
+      &.syntax--tag {
+        color: #008080;
+        font-weight: normal;
+      }
+    }
+
+    // href src alt
+    .syntax--attribute {
+      color: #458;
+      font-weight: bold;
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: #555;
+
+      // height position border
+      &.syntax--support {
+        font-weight: bold;
+        color: #333;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: #008080;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: #606aa1;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
+    color: #555;
+
+    // flex solid bold
+    &.syntax--support {
+      color: #099;
+    }
+
+    // 4 1.3
+    &.syntax--numeric {
+      color: #099;
+
+      // px % cm hz
+      &.syntax--unit {
+        color: #445588;
+        font-weight: bold;
+      }
+    }
+
+    // screen print
+    &.syntax--media {
+      color: #099;
+    }
+
+    // #b294bb blue red
+    &.syntax--color {
+      color: #099;
+    }
+
+    // [attribute=attribute-value]
+    &.syntax--attribute-value {
+      color: #D14;
+    }
+  }
+
+  // . : :: #
+  .syntax--punctuation.syntax--selector {
+    color: #458;
+    font-weight: bold;
+
+    // *
+    &.syntax--wildcard {
+      color: #008080;
+      font-weight: normal;
+    }
+
+    // []
+    &.syntax--attribute {
+      color: #555;
+      font-weight: normal;
+    }
+  }
+}
diff --git a/packages/base16-tomorrow-dark-theme/index.less b/packages/base16-tomorrow-dark-theme/index.less
index bebbc05a72a..f3dfd339c8d 100644
--- a/packages/base16-tomorrow-dark-theme/index.less
+++ b/packages/base16-tomorrow-dark-theme/index.less
@@ -5,6 +5,9 @@
 
 @import "styles/editor.less";
 
-@import "styles/syntax/_base.less";
-@import "styles/syntax/cs.less";
-@import "styles/syntax/json.less";
+@import "styles/syntax-legacy/_base.less";
+@import "styles/syntax-legacy/cs.less";
+@import "styles/syntax-legacy/json.less";
+
+@import "styles/syntax/base.less";
+@import "styles/syntax/css.less";
diff --git a/packages/base16-tomorrow-dark-theme/styles/syntax/_base.less b/packages/base16-tomorrow-dark-theme/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/base16-tomorrow-dark-theme/styles/syntax/_base.less
rename to packages/base16-tomorrow-dark-theme/styles/syntax-legacy/_base.less
diff --git a/packages/base16-tomorrow-dark-theme/styles/syntax/cs.less b/packages/base16-tomorrow-dark-theme/styles/syntax-legacy/cs.less
similarity index 100%
rename from packages/base16-tomorrow-dark-theme/styles/syntax/cs.less
rename to packages/base16-tomorrow-dark-theme/styles/syntax-legacy/cs.less
diff --git a/packages/base16-tomorrow-dark-theme/styles/syntax/json.less b/packages/base16-tomorrow-dark-theme/styles/syntax-legacy/json.less
similarity index 100%
rename from packages/base16-tomorrow-dark-theme/styles/syntax/json.less
rename to packages/base16-tomorrow-dark-theme/styles/syntax-legacy/json.less
diff --git a/packages/base16-tomorrow-dark-theme/styles/syntax/base.less b/packages/base16-tomorrow-dark-theme/styles/syntax/base.less
new file mode 100644
index 00000000000..44cfa2ca0e6
--- /dev/null
+++ b/packages/base16-tomorrow-dark-theme/styles/syntax/base.less
@@ -0,0 +1,293 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return
+.syntax--keyword {
+  color: @purple;
+
+  // global let def class
+  &.syntax--storage {
+    color: @purple;
+  }
+
+  // int char float
+  &.syntax--type {
+    color: @yellow;
+  }
+
+  // and del not
+  &.syntax--operator {
+    color: @purple;
+  }
+
+  // super
+  &.syntax--function {
+    color: @red;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @red;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: @syntax-text-color;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @syntax-text-color;
+
+  // self cls iota
+  &.syntax--support {
+    color: @red;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @blue;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @blue;
+
+    // len print
+    &.syntax--support {
+      color: @cyan;
+    }
+  }
+
+  // add
+  &.syntax--operator {
+    color: @blue;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @syntax-text-color;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: @yellow;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @red;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @orange;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @syntax-text-color;
+
+  // { } ~~~
+  &.syntax--embedded {
+    color: @brown;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: @green;
+
+  // :immutable
+  &.syntax--immutable {
+    color: @green;
+  }
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: @cyan;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: @brown;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @green;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @purple;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @blue;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: @brown;
+    }
+  }
+}
+
+// literal 4 1.3 true nil
+.syntax--constant {
+  color: @orange;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @green;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @green;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @cyan;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: @syntax-text-color;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @red;
+  }
+
+  // 1. * -
+  &.syntax--list.syntax--punctuation {
+    color: @red;
+  }
+
+  // **bold**
+  &.syntax--bold {
+    color: @orange;
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    color: @purple;
+    font-style: italic;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: @green;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @blue;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @cyan;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @green;
+
+    .syntax--punctuation {
+      color: @green;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--inserted {
+    color: @green;
+
+    .syntax--punctuation {
+      color: @green;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @red;
+
+    .syntax--punctuation {
+      color: @red;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @purple;
+
+    .syntax--punctuation {
+      color: @purple;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @gray;
+
+    .syntax--punctuation {
+      color: @gray;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @gray;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(@gray, 3);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(@gray, 7);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @gray;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    background-color: @red;
+    color: @syntax-background-color;
+  }
+}
diff --git a/packages/base16-tomorrow-dark-theme/styles/syntax/css.less b/packages/base16-tomorrow-dark-theme/styles/syntax/css.less
new file mode 100644
index 00000000000..95206ebb518
--- /dev/null
+++ b/packages/base16-tomorrow-dark-theme/styles/syntax/css.less
@@ -0,0 +1,113 @@
+.syntax--source.syntax--css {
+
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: @syntax-text-color;
+
+      // url rgb
+      &.syntax--support {
+        color: @cyan;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: @orange;
+
+      // div span
+      &.syntax--tag {
+        color: @red;
+      }
+
+      // #id
+      &.syntax--id {
+        color: @blue;
+      }
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @syntax-text-color;
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @red;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: @red;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
+    color: @syntax-text-color;
+
+    // flex solid bold
+    &.syntax--support {
+      color: @orange;
+    }
+
+    // 3px 4em
+    &.syntax--numeric {
+      color: @orange;
+    }
+
+    // screen print
+    &.syntax--media {
+      color: @orange;
+    }
+
+    // from to 50%
+    &.syntax--offset {
+      color: @syntax-text-color;
+
+      // %
+      &.syntax--unit {
+        color: @syntax-text-color;
+      }
+    }
+
+    // #b294bb
+    &.syntax--color {
+      color: @cyan;
+
+      // blue red
+      &.syntax--support {
+        color: @orange;
+      }
+    }
+
+    // [attribute=attribute-value]
+    &.syntax--attribute-value {
+      color: @green;
+    }
+  }
+
+  .syntax--punctuation {
+
+    // . : ::
+    &.syntax--selector {
+      color: @orange;
+
+      // *
+      &.syntax--wildcard {
+        color: @red;
+      }
+
+      // #
+      &.syntax--id {
+        color: @blue;
+      }
+
+      // []
+      &.syntax--attribute {
+        color: @syntax-text-color;
+      }
+    }
+  }
+}
diff --git a/packages/base16-tomorrow-light-theme/index.less b/packages/base16-tomorrow-light-theme/index.less
index 356239efddb..fef2c95cd39 100644
--- a/packages/base16-tomorrow-light-theme/index.less
+++ b/packages/base16-tomorrow-light-theme/index.less
@@ -5,6 +5,9 @@
 
 @import "styles/editor.less";
 
-@import "styles/syntax/_base.less";
-@import "styles/syntax/cs.less";
-@import "styles/syntax/json.less";
+@import "styles/syntax-legacy/_base.less";
+@import "styles/syntax-legacy/cs.less";
+@import "styles/syntax-legacy/json.less";
+
+@import "styles/syntax/base.less";
+@import "styles/syntax/css.less";
diff --git a/packages/base16-tomorrow-light-theme/styles/syntax/_base.less b/packages/base16-tomorrow-light-theme/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/base16-tomorrow-light-theme/styles/syntax/_base.less
rename to packages/base16-tomorrow-light-theme/styles/syntax-legacy/_base.less
diff --git a/packages/base16-tomorrow-light-theme/styles/syntax/cs.less b/packages/base16-tomorrow-light-theme/styles/syntax-legacy/cs.less
similarity index 100%
rename from packages/base16-tomorrow-light-theme/styles/syntax/cs.less
rename to packages/base16-tomorrow-light-theme/styles/syntax-legacy/cs.less
diff --git a/packages/base16-tomorrow-light-theme/styles/syntax/json.less b/packages/base16-tomorrow-light-theme/styles/syntax-legacy/json.less
similarity index 100%
rename from packages/base16-tomorrow-light-theme/styles/syntax/json.less
rename to packages/base16-tomorrow-light-theme/styles/syntax-legacy/json.less
diff --git a/packages/base16-tomorrow-light-theme/styles/syntax/base.less b/packages/base16-tomorrow-light-theme/styles/syntax/base.less
new file mode 100644
index 00000000000..44cfa2ca0e6
--- /dev/null
+++ b/packages/base16-tomorrow-light-theme/styles/syntax/base.less
@@ -0,0 +1,293 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return
+.syntax--keyword {
+  color: @purple;
+
+  // global let def class
+  &.syntax--storage {
+    color: @purple;
+  }
+
+  // int char float
+  &.syntax--type {
+    color: @yellow;
+  }
+
+  // and del not
+  &.syntax--operator {
+    color: @purple;
+  }
+
+  // super
+  &.syntax--function {
+    color: @red;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @red;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: @syntax-text-color;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @syntax-text-color;
+
+  // self cls iota
+  &.syntax--support {
+    color: @red;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @blue;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @blue;
+
+    // len print
+    &.syntax--support {
+      color: @cyan;
+    }
+  }
+
+  // add
+  &.syntax--operator {
+    color: @blue;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @syntax-text-color;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: @yellow;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @red;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @orange;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @syntax-text-color;
+
+  // { } ~~~
+  &.syntax--embedded {
+    color: @brown;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: @green;
+
+  // :immutable
+  &.syntax--immutable {
+    color: @green;
+  }
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: @cyan;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: @brown;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @green;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @purple;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @blue;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: @brown;
+    }
+  }
+}
+
+// literal 4 1.3 true nil
+.syntax--constant {
+  color: @orange;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @green;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @green;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @cyan;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: @syntax-text-color;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @red;
+  }
+
+  // 1. * -
+  &.syntax--list.syntax--punctuation {
+    color: @red;
+  }
+
+  // **bold**
+  &.syntax--bold {
+    color: @orange;
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    color: @purple;
+    font-style: italic;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: @green;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @blue;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @cyan;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @green;
+
+    .syntax--punctuation {
+      color: @green;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--inserted {
+    color: @green;
+
+    .syntax--punctuation {
+      color: @green;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @red;
+
+    .syntax--punctuation {
+      color: @red;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @purple;
+
+    .syntax--punctuation {
+      color: @purple;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @gray;
+
+    .syntax--punctuation {
+      color: @gray;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @gray;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(@gray, 3);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(@gray, 7);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @gray;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    background-color: @red;
+    color: @syntax-background-color;
+  }
+}
diff --git a/packages/base16-tomorrow-light-theme/styles/syntax/css.less b/packages/base16-tomorrow-light-theme/styles/syntax/css.less
new file mode 100644
index 00000000000..95206ebb518
--- /dev/null
+++ b/packages/base16-tomorrow-light-theme/styles/syntax/css.less
@@ -0,0 +1,113 @@
+.syntax--source.syntax--css {
+
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: @syntax-text-color;
+
+      // url rgb
+      &.syntax--support {
+        color: @cyan;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: @orange;
+
+      // div span
+      &.syntax--tag {
+        color: @red;
+      }
+
+      // #id
+      &.syntax--id {
+        color: @blue;
+      }
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @syntax-text-color;
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @red;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: @red;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
+    color: @syntax-text-color;
+
+    // flex solid bold
+    &.syntax--support {
+      color: @orange;
+    }
+
+    // 3px 4em
+    &.syntax--numeric {
+      color: @orange;
+    }
+
+    // screen print
+    &.syntax--media {
+      color: @orange;
+    }
+
+    // from to 50%
+    &.syntax--offset {
+      color: @syntax-text-color;
+
+      // %
+      &.syntax--unit {
+        color: @syntax-text-color;
+      }
+    }
+
+    // #b294bb
+    &.syntax--color {
+      color: @cyan;
+
+      // blue red
+      &.syntax--support {
+        color: @orange;
+      }
+    }
+
+    // [attribute=attribute-value]
+    &.syntax--attribute-value {
+      color: @green;
+    }
+  }
+
+  .syntax--punctuation {
+
+    // . : ::
+    &.syntax--selector {
+      color: @orange;
+
+      // *
+      &.syntax--wildcard {
+        color: @red;
+      }
+
+      // #
+      &.syntax--id {
+        color: @blue;
+      }
+
+      // []
+      &.syntax--attribute {
+        color: @syntax-text-color;
+      }
+    }
+  }
+}
diff --git a/packages/one-dark-syntax/index.less b/packages/one-dark-syntax/index.less
index 3f21987be0b..22ff407854c 100644
--- a/packages/one-dark-syntax/index.less
+++ b/packages/one-dark-syntax/index.less
@@ -5,20 +5,23 @@
 
 @import "styles/editor.less";
 
-@import "styles/syntax/_base.less";
-@import "styles/syntax/c.less";
-@import "styles/syntax/cpp.less";
-@import "styles/syntax/cs.less";
+@import "styles/syntax-legacy/_base.less";
+// @import "styles/syntax-legacy/c.less";
+// @import "styles/syntax-legacy/cpp.less";
+@import "styles/syntax-legacy/cs.less";
+@import "styles/syntax-legacy/css.less";
+@import "styles/syntax-legacy/elixir.less";
+@import "styles/syntax-legacy/gfm.less";
+// @import "styles/syntax-legacy/go.less";
+@import "styles/syntax-legacy/ini.less";
+@import "styles/syntax-legacy/java.less";
+// @import "styles/syntax-legacy/javascript.less";
+@import "styles/syntax-legacy/typescript.less";
+@import "styles/syntax-legacy/json.less";
+@import "styles/syntax-legacy/ng.less";
+// @import "styles/syntax-legacy/ruby.less";
+@import "styles/syntax-legacy/php.less";
+// @import "styles/syntax-legacy/python.less";
+
+@import "styles/syntax/base.less";
 @import "styles/syntax/css.less";
-@import "styles/syntax/elixir.less";
-@import "styles/syntax/gfm.less";
-@import "styles/syntax/go.less";
-@import "styles/syntax/ini.less";
-@import "styles/syntax/java.less";
-@import "styles/syntax/javascript.less";
-@import "styles/syntax/typescript.less";
-@import "styles/syntax/json.less";
-@import "styles/syntax/ng.less";
-@import "styles/syntax/ruby.less";
-@import "styles/syntax/php.less";
-@import "styles/syntax/python.less";
diff --git a/packages/one-dark-syntax/styles/syntax/_base.less b/packages/one-dark-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/_base.less
rename to packages/one-dark-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/one-dark-syntax/styles/syntax/c.less b/packages/one-dark-syntax/styles/syntax-legacy/c.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/c.less
rename to packages/one-dark-syntax/styles/syntax-legacy/c.less
diff --git a/packages/one-dark-syntax/styles/syntax/cpp.less b/packages/one-dark-syntax/styles/syntax-legacy/cpp.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/cpp.less
rename to packages/one-dark-syntax/styles/syntax-legacy/cpp.less
diff --git a/packages/one-dark-syntax/styles/syntax/cs.less b/packages/one-dark-syntax/styles/syntax-legacy/cs.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/cs.less
rename to packages/one-dark-syntax/styles/syntax-legacy/cs.less
diff --git a/packages/one-dark-syntax/styles/syntax-legacy/css.less b/packages/one-dark-syntax/styles/syntax-legacy/css.less
new file mode 100644
index 00000000000..3a63ff2248c
--- /dev/null
+++ b/packages/one-dark-syntax/styles/syntax-legacy/css.less
@@ -0,0 +1,10 @@
+.syntax--source.syntax--css {
+  // highlight properties/values if they are supported
+  .syntax--property-name,
+  .syntax--property-value {
+    color: @mono-2;
+    &.syntax--support {
+      color: @mono-1;
+    }
+  }
+}
diff --git a/packages/one-dark-syntax/styles/syntax/elixir.less b/packages/one-dark-syntax/styles/syntax-legacy/elixir.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/elixir.less
rename to packages/one-dark-syntax/styles/syntax-legacy/elixir.less
diff --git a/packages/one-dark-syntax/styles/syntax/gfm.less b/packages/one-dark-syntax/styles/syntax-legacy/gfm.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/gfm.less
rename to packages/one-dark-syntax/styles/syntax-legacy/gfm.less
diff --git a/packages/one-dark-syntax/styles/syntax/go.less b/packages/one-dark-syntax/styles/syntax-legacy/go.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/go.less
rename to packages/one-dark-syntax/styles/syntax-legacy/go.less
diff --git a/packages/one-dark-syntax/styles/syntax/ini.less b/packages/one-dark-syntax/styles/syntax-legacy/ini.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/ini.less
rename to packages/one-dark-syntax/styles/syntax-legacy/ini.less
diff --git a/packages/one-dark-syntax/styles/syntax/java.less b/packages/one-dark-syntax/styles/syntax-legacy/java.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/java.less
rename to packages/one-dark-syntax/styles/syntax-legacy/java.less
diff --git a/packages/one-dark-syntax/styles/syntax/javascript.less b/packages/one-dark-syntax/styles/syntax-legacy/javascript.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/javascript.less
rename to packages/one-dark-syntax/styles/syntax-legacy/javascript.less
diff --git a/packages/one-dark-syntax/styles/syntax/json.less b/packages/one-dark-syntax/styles/syntax-legacy/json.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/json.less
rename to packages/one-dark-syntax/styles/syntax-legacy/json.less
diff --git a/packages/one-dark-syntax/styles/syntax/ng.less b/packages/one-dark-syntax/styles/syntax-legacy/ng.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/ng.less
rename to packages/one-dark-syntax/styles/syntax-legacy/ng.less
diff --git a/packages/one-dark-syntax/styles/syntax/php.less b/packages/one-dark-syntax/styles/syntax-legacy/php.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/php.less
rename to packages/one-dark-syntax/styles/syntax-legacy/php.less
diff --git a/packages/one-dark-syntax/styles/syntax/python.less b/packages/one-dark-syntax/styles/syntax-legacy/python.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/python.less
rename to packages/one-dark-syntax/styles/syntax-legacy/python.less
diff --git a/packages/one-dark-syntax/styles/syntax/ruby.less b/packages/one-dark-syntax/styles/syntax-legacy/ruby.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/ruby.less
rename to packages/one-dark-syntax/styles/syntax-legacy/ruby.less
diff --git a/packages/one-dark-syntax/styles/syntax/typescript.less b/packages/one-dark-syntax/styles/syntax-legacy/typescript.less
similarity index 100%
rename from packages/one-dark-syntax/styles/syntax/typescript.less
rename to packages/one-dark-syntax/styles/syntax-legacy/typescript.less
diff --git a/packages/one-dark-syntax/styles/syntax/base.less b/packages/one-dark-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..829bd9abdeb
--- /dev/null
+++ b/packages/one-dark-syntax/styles/syntax/base.less
@@ -0,0 +1,312 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for and del let = &&
+.syntax--keyword {
+  color: @hue-3;
+
+  // int char float
+  &.syntax--type {
+    color: @hue-1;
+  }
+
+  // super
+  &.syntax--function {
+    color: @hue-5;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @hue-5;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @mono-1;
+
+  // function(parameter)
+  &.syntax--parameter {
+    color: @mono-1;
+  }
+
+  // self cls iota
+  &.syntax--support {
+    color: @hue-5;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @hue-2;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @hue-2;
+  }
+
+  // add
+  &.syntax--operator {
+    color: @hue-2;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @mono-1;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: @hue-1;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @hue-5;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @hue-6;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @mono-1;
+
+  &.syntax--accessor {
+    color: @mono-1;
+
+    // . -> ::
+    &.syntax--member,
+    &.syntax--scope {
+      color: @hue-3;
+    }
+  }
+
+  // { } ~~~
+  &.syntax--embedded {
+    color: @hue-3;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: @hue-4;
+
+  // :immutable
+  &.syntax--immutable {
+    color: @hue-4;
+  }
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: @hue-1;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: @hue-3;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @hue-4;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @hue-3;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @hue-2;
+    }
+
+    // ( ) [^ ] (?= ) |
+    &.syntax--punctuation {
+      color: @hue-3;
+    }
+  }
+}
+
+// literal 4 1.3 true nil
+.syntax--constant {
+  color: @hue-6;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @hue-4;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @hue-4;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @hue-1;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: @mono-1;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @hue-5;
+  }
+
+  // 1. * -
+  &.syntax--list.syntax--punctuation {
+    color: @hue-5;
+  }
+
+  // > quote
+  &.syntax--quote {
+    color: @mono-3;
+    font-style: italic;
+  }
+
+  // **bold**
+  &.syntax--bold {
+    color: @hue-6;
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    color: @hue-3;
+    font-style: italic;
+  }
+
+  // __underline__
+  &.syntax--underline {
+    color: @hue-1;
+    text-decoration: underline;
+  }
+
+  // ~~strike~~
+  &.syntax--strike {
+    color: @hue-5;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: @hue-4;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @hue-1;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @hue-2;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @hue-4;
+
+    .syntax--punctuation {
+      color: @hue-4;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--highlighted {
+    color: @hue-4;
+
+    .syntax--punctuation {
+      color: @hue-4;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @hue-5;
+
+    .syntax--punctuation {
+      color: @hue-5;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @hue-3;
+
+    .syntax--punctuation {
+      color: @hue-3;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @mono-3;
+
+    .syntax--punctuation {
+      color: @mono-3;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @mono-3;
+  font-style: italic;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(@mono-3, 6);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(@mono-3, 9);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @mono-3;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: @syntax-illegal-fg !important;
+    background-color: @syntax-illegal-bg !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: @syntax-deprecated-fg !important;
+    background-color: @syntax-deprecated-bg !important;
+  }
+}
diff --git a/packages/one-dark-syntax/styles/syntax/css.less b/packages/one-dark-syntax/styles/syntax/css.less
index 3a63ff2248c..d7d2bed0494 100644
--- a/packages/one-dark-syntax/styles/syntax/css.less
+++ b/packages/one-dark-syntax/styles/syntax/css.less
@@ -1,10 +1,103 @@
 .syntax--source.syntax--css {
-  // highlight properties/values if they are supported
-  .syntax--property-name,
-  .syntax--property-value {
+
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: @mono-2;
+
+      // url rgb
+      &.syntax--support {
+        color: @hue-1;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: @hue-6;
+
+      // div span
+      &.syntax--tag {
+        color: @hue-5;
+      }
+
+      // #id
+      &.syntax--id {
+        color: @hue-2;
+      }
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @mono-2;
+
+      // height position border
+      &.syntax--support {
+        color: @mono-1;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @hue-5;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
     color: @mono-2;
+
+    // flex solid bold
     &.syntax--support {
       color: @mono-1;
     }
+
+    // 3px 4em
+    &.syntax--numeric {
+      color: @hue-6;
+    }
+
+    // screen print
+    &.syntax--media {
+      color: @hue-6;
+    }
+
+    // #b294bb blue red
+    &.syntax--color {
+      color: @hue-6;
+    }
+
+    // from to
+    &.syntax--offset {
+      color: @mono-1;
+    }
+
+    // [attribute=attribute-value]
+    &.syntax--attribute-value {
+      color: @hue-4;
+    }
+  }
+
+  .syntax--punctuation {
+
+    // . : ::
+    &.syntax--selector {
+      color: @hue-6;
+
+      // *
+      &.syntax--wildcard {
+        color: @hue-5;
+      }
+
+      // #
+      &.syntax--id {
+        color: @hue-2;
+      }
+
+      // []
+      &.syntax--attribute {
+        color: @mono-1;
+      }
+    }
   }
 }
diff --git a/packages/one-light-syntax/index.less b/packages/one-light-syntax/index.less
index 3f21987be0b..22ff407854c 100644
--- a/packages/one-light-syntax/index.less
+++ b/packages/one-light-syntax/index.less
@@ -5,20 +5,23 @@
 
 @import "styles/editor.less";
 
-@import "styles/syntax/_base.less";
-@import "styles/syntax/c.less";
-@import "styles/syntax/cpp.less";
-@import "styles/syntax/cs.less";
+@import "styles/syntax-legacy/_base.less";
+// @import "styles/syntax-legacy/c.less";
+// @import "styles/syntax-legacy/cpp.less";
+@import "styles/syntax-legacy/cs.less";
+@import "styles/syntax-legacy/css.less";
+@import "styles/syntax-legacy/elixir.less";
+@import "styles/syntax-legacy/gfm.less";
+// @import "styles/syntax-legacy/go.less";
+@import "styles/syntax-legacy/ini.less";
+@import "styles/syntax-legacy/java.less";
+// @import "styles/syntax-legacy/javascript.less";
+@import "styles/syntax-legacy/typescript.less";
+@import "styles/syntax-legacy/json.less";
+@import "styles/syntax-legacy/ng.less";
+// @import "styles/syntax-legacy/ruby.less";
+@import "styles/syntax-legacy/php.less";
+// @import "styles/syntax-legacy/python.less";
+
+@import "styles/syntax/base.less";
 @import "styles/syntax/css.less";
-@import "styles/syntax/elixir.less";
-@import "styles/syntax/gfm.less";
-@import "styles/syntax/go.less";
-@import "styles/syntax/ini.less";
-@import "styles/syntax/java.less";
-@import "styles/syntax/javascript.less";
-@import "styles/syntax/typescript.less";
-@import "styles/syntax/json.less";
-@import "styles/syntax/ng.less";
-@import "styles/syntax/ruby.less";
-@import "styles/syntax/php.less";
-@import "styles/syntax/python.less";
diff --git a/packages/one-light-syntax/styles/colors.less b/packages/one-light-syntax/styles/colors.less
index ca513b9dc5a..6ce9c13f39c 100644
--- a/packages/one-light-syntax/styles/colors.less
+++ b/packages/one-light-syntax/styles/colors.less
@@ -19,8 +19,8 @@
 @hue-5:   hsl(  5, 74%, 59%); // <-red 1
 @hue-5-2: hsl(344, 84%, 43%); // <-red 2
 
-@hue-6:   hsl(41, 99%, 30%); // <-orange 1
-@hue-6-2: hsl(41, 99%, 38%); // <-orange 2
+@hue-6:   hsl(35, 99%, 36%); // <-orange 1
+@hue-6-2: hsl(35, 99%, 40%); // <-orange 2
 
 
 // Base colors -----------------------------------
diff --git a/packages/one-light-syntax/styles/syntax/_base.less b/packages/one-light-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/_base.less
rename to packages/one-light-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/one-light-syntax/styles/syntax/c.less b/packages/one-light-syntax/styles/syntax-legacy/c.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/c.less
rename to packages/one-light-syntax/styles/syntax-legacy/c.less
diff --git a/packages/one-light-syntax/styles/syntax/cpp.less b/packages/one-light-syntax/styles/syntax-legacy/cpp.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/cpp.less
rename to packages/one-light-syntax/styles/syntax-legacy/cpp.less
diff --git a/packages/one-light-syntax/styles/syntax/cs.less b/packages/one-light-syntax/styles/syntax-legacy/cs.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/cs.less
rename to packages/one-light-syntax/styles/syntax-legacy/cs.less
diff --git a/packages/one-light-syntax/styles/syntax-legacy/css.less b/packages/one-light-syntax/styles/syntax-legacy/css.less
new file mode 100644
index 00000000000..75eeb56aea3
--- /dev/null
+++ b/packages/one-light-syntax/styles/syntax-legacy/css.less
@@ -0,0 +1,12 @@
+.syntax--source.syntax--css {
+
+  // highlight properties/values if they are supported
+  .syntax--property-name,
+  .syntax--property-value {
+    color: @mono-2;
+    &.syntax--support {
+      color: @mono-1;
+    }
+  }
+
+}
diff --git a/packages/one-light-syntax/styles/syntax/elixir.less b/packages/one-light-syntax/styles/syntax-legacy/elixir.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/elixir.less
rename to packages/one-light-syntax/styles/syntax-legacy/elixir.less
diff --git a/packages/one-light-syntax/styles/syntax/gfm.less b/packages/one-light-syntax/styles/syntax-legacy/gfm.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/gfm.less
rename to packages/one-light-syntax/styles/syntax-legacy/gfm.less
diff --git a/packages/one-light-syntax/styles/syntax/go.less b/packages/one-light-syntax/styles/syntax-legacy/go.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/go.less
rename to packages/one-light-syntax/styles/syntax-legacy/go.less
diff --git a/packages/one-light-syntax/styles/syntax/ini.less b/packages/one-light-syntax/styles/syntax-legacy/ini.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/ini.less
rename to packages/one-light-syntax/styles/syntax-legacy/ini.less
diff --git a/packages/one-light-syntax/styles/syntax/java.less b/packages/one-light-syntax/styles/syntax-legacy/java.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/java.less
rename to packages/one-light-syntax/styles/syntax-legacy/java.less
diff --git a/packages/one-light-syntax/styles/syntax/javascript.less b/packages/one-light-syntax/styles/syntax-legacy/javascript.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/javascript.less
rename to packages/one-light-syntax/styles/syntax-legacy/javascript.less
diff --git a/packages/one-light-syntax/styles/syntax/json.less b/packages/one-light-syntax/styles/syntax-legacy/json.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/json.less
rename to packages/one-light-syntax/styles/syntax-legacy/json.less
diff --git a/packages/one-light-syntax/styles/syntax/ng.less b/packages/one-light-syntax/styles/syntax-legacy/ng.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/ng.less
rename to packages/one-light-syntax/styles/syntax-legacy/ng.less
diff --git a/packages/one-light-syntax/styles/syntax/php.less b/packages/one-light-syntax/styles/syntax-legacy/php.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/php.less
rename to packages/one-light-syntax/styles/syntax-legacy/php.less
diff --git a/packages/one-light-syntax/styles/syntax/python.less b/packages/one-light-syntax/styles/syntax-legacy/python.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/python.less
rename to packages/one-light-syntax/styles/syntax-legacy/python.less
diff --git a/packages/one-light-syntax/styles/syntax/ruby.less b/packages/one-light-syntax/styles/syntax-legacy/ruby.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/ruby.less
rename to packages/one-light-syntax/styles/syntax-legacy/ruby.less
diff --git a/packages/one-light-syntax/styles/syntax/typescript.less b/packages/one-light-syntax/styles/syntax-legacy/typescript.less
similarity index 100%
rename from packages/one-light-syntax/styles/syntax/typescript.less
rename to packages/one-light-syntax/styles/syntax-legacy/typescript.less
diff --git a/packages/one-light-syntax/styles/syntax/base.less b/packages/one-light-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..5c13a2515b5
--- /dev/null
+++ b/packages/one-light-syntax/styles/syntax/base.less
@@ -0,0 +1,312 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return global let
+.syntax--keyword {
+  color: @hue-3;
+
+  // int char float
+  &.syntax--type {
+    color: @hue-1;
+  }
+
+  // and or new del
+  &.syntax--operator {
+    color: @hue-3;
+  }
+
+  // super
+  &.syntax--function {
+    color: @hue-5;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @hue-5;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: @mono-1;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @mono-1;
+
+  // function(parameter)
+  &.syntax--parameter {
+    color: @mono-1;
+  }
+
+  // self cls iota
+  &.syntax--support {
+    color: @hue-5;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @hue-2;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @hue-2;
+  }
+
+  // add
+  &.syntax--operator {
+    color: @hue-2;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @mono-1;
+    }
+  }
+
+  // String Class int rune list
+  &.syntax--type {
+    color: @hue-1;
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @hue-5;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @hue-6;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @mono-1;
+
+  // . -> :: []
+  &.syntax--accessor {
+    color: @mono-1;
+  }
+}
+
+// "string"
+.syntax--string {
+  color: @hue-4;
+
+  // :immutable
+  &.syntax--immutable {
+    color: @hue-4;
+  }
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: @hue-1;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: @mono-1;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @hue-4;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @hue-3;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @hue-2;
+    }
+
+    // ( ) [^ ] (?= ) |
+    &.syntax--punctuation {
+      color: @hue-3;
+    }
+  }
+}
+
+// literal 4 1.3 true nil
+.syntax--constant {
+  color: @hue-6;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @hue-4;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @hue-4;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @hue-1;
+    }
+  }
+}
+
+// text
+.syntax--text {
+  color: @mono-1;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @hue-5;
+  }
+
+  // 1. * -
+  &.syntax--list.syntax--punctuation {
+    color: @hue-5;
+  }
+
+  // > quote
+  &.syntax--quote {
+    color: @mono-3;
+    font-style: italic;
+  }
+
+  // **bold**
+  &.syntax--bold {
+    color: @hue-6;
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    color: @hue-3;
+    font-style: italic;
+  }
+
+  // __underline__
+  &.syntax--underline {
+    color: @hue-1;
+    text-decoration: underline;
+  }
+
+  // ~~strike~~
+  &.syntax--strike {
+    color: @hue-5;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    color: @hue-4;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @hue-1;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @hue-2;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @hue-4;
+
+    .syntax--punctuation {
+      color: @hue-4;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--highlighted {
+    color: @hue-4;
+
+    .syntax--punctuation {
+      color: @hue-4;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @hue-5;
+
+    .syntax--punctuation {
+      color: @hue-5;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @hue-3;
+
+    .syntax--punctuation {
+      color: @hue-3;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @mono-3;
+
+    .syntax--punctuation {
+      color: @mono-3;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @mono-3;
+  font-style: italic;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: lighten(@mono-3, 6);
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: lighten(@mono-3, 9);
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @mono-3;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: @syntax-illegal-fg !important;
+    background-color: @syntax-illegal-bg !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: @syntax-deprecated-fg !important;
+    background-color: @syntax-deprecated-bg !important;
+  }
+}
diff --git a/packages/one-light-syntax/styles/syntax/css.less b/packages/one-light-syntax/styles/syntax/css.less
index 75eeb56aea3..d7d2bed0494 100644
--- a/packages/one-light-syntax/styles/syntax/css.less
+++ b/packages/one-light-syntax/styles/syntax/css.less
@@ -1,12 +1,103 @@
 .syntax--source.syntax--css {
 
-  // highlight properties/values if they are supported
-  .syntax--property-name,
-  .syntax--property-value {
+  .syntax--entity {
+
+    // function()
+    &.syntax--function {
+      color: @mono-2;
+
+      // url rgb
+      &.syntax--support {
+        color: @hue-1;
+      }
+    }
+
+    // .class :pseudo-class attribute
+    &.syntax--selector {
+      color: @hue-6;
+
+      // div span
+      &.syntax--tag {
+        color: @hue-5;
+      }
+
+      // #id
+      &.syntax--id {
+        color: @hue-2;
+      }
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @mono-2;
+
+      // height position border
+      &.syntax--support {
+        color: @mono-1;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @hue-5;
+    }
+  }
+
+  // property: constant
+  .syntax--constant {
     color: @mono-2;
+
+    // flex solid bold
     &.syntax--support {
       color: @mono-1;
     }
+
+    // 3px 4em
+    &.syntax--numeric {
+      color: @hue-6;
+    }
+
+    // screen print
+    &.syntax--media {
+      color: @hue-6;
+    }
+
+    // #b294bb blue red
+    &.syntax--color {
+      color: @hue-6;
+    }
+
+    // from to
+    &.syntax--offset {
+      color: @mono-1;
+    }
+
+    // [attribute=attribute-value]
+    &.syntax--attribute-value {
+      color: @hue-4;
+    }
   }
 
+  .syntax--punctuation {
+
+    // . : ::
+    &.syntax--selector {
+      color: @hue-6;
+
+      // *
+      &.syntax--wildcard {
+        color: @hue-5;
+      }
+
+      // #
+      &.syntax--id {
+        color: @hue-2;
+      }
+
+      // []
+      &.syntax--attribute {
+        color: @mono-1;
+      }
+    }
+  }
 }
diff --git a/packages/solarized-dark-syntax/index.less b/packages/solarized-dark-syntax/index.less
index 3c3a0755a60..66afd1ccfb5 100644
--- a/packages/solarized-dark-syntax/index.less
+++ b/packages/solarized-dark-syntax/index.less
@@ -6,17 +6,22 @@
 @import "styles/editor.less";
 
 // Languages
-@import "styles/syntax/_base.less";
-@import "styles/syntax/c.less";
-@import "styles/syntax/coffee.less";
+@import "styles/syntax-legacy/_base.less";
+// @import "styles/syntax-legacy/c.less";
+@import "styles/syntax-legacy/coffee.less";
+@import "styles/syntax-legacy/css.less";
+// @import "styles/syntax-legacy/go.less";
+@import "styles/syntax-legacy/java.less";
+// @import "styles/syntax-legacy/javascript.less";
+@import "styles/syntax-legacy/markdown.less";
+@import "styles/syntax-legacy/markup.less";
+@import "styles/syntax-legacy/php.less";
+// @import "styles/syntax-legacy/python.less";
+// @import "styles/syntax-legacy/ruby.less";
+@import "styles/syntax-legacy/scala.less";
+@import "styles/syntax-legacy/typescript.less";
+
+@import "styles/syntax/base.less";
 @import "styles/syntax/css.less";
-@import "styles/syntax/go.less";
-@import "styles/syntax/java.less";
-@import "styles/syntax/javascript.less";
-@import "styles/syntax/markdown.less";
-@import "styles/syntax/markup.less";
-@import "styles/syntax/php.less";
-@import "styles/syntax/python.less";
-@import "styles/syntax/ruby.less";
-@import "styles/syntax/scala.less";
-@import "styles/syntax/typescript.less";
+@import "styles/syntax/html.less";
+@import "styles/syntax/js.less";
diff --git a/packages/solarized-dark-syntax/styles/syntax/_base.less b/packages/solarized-dark-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/_base.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/c.less b/packages/solarized-dark-syntax/styles/syntax-legacy/c.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/c.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/c.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/coffee.less b/packages/solarized-dark-syntax/styles/syntax-legacy/coffee.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/coffee.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/coffee.less
diff --git a/packages/solarized-dark-syntax/styles/syntax-legacy/css.less b/packages/solarized-dark-syntax/styles/syntax-legacy/css.less
new file mode 100644
index 00000000000..8bfaf8c3404
--- /dev/null
+++ b/packages/solarized-dark-syntax/styles/syntax-legacy/css.less
@@ -0,0 +1,63 @@
+.syntax--source.syntax--css {
+
+  .syntax--punctuation {
+    &.syntax--separator,
+    &.syntax--terminator {
+      color: @syntax-text-color;
+    }
+    &.syntax--property-list.syntax--begin,
+    &.syntax--property-list.syntax--end {
+      color: @red;
+    }
+    &.syntax--section.syntax--function {
+      color: @cyan;
+    }
+  }
+
+  .syntax--entity.syntax--name {
+    color: @green;
+  }
+  .syntax--attribute-name.syntax--class,
+  .syntax--id {
+    color: @blue;
+  }
+  .syntax--pseudo-element,
+  .syntax--pseudo-class {
+    color: @orange;
+  }
+
+  .syntax--property-value {
+    color: @cyan;
+  }
+  .syntax--constant.syntax--numeric {
+    color: @cyan;
+    .syntax--unit {
+      color: @cyan;
+    }
+  }
+  .syntax--rgb-value {
+    color: @cyan;
+  }
+  .syntax--support.syntax--constant {
+    color: @cyan;
+    &.syntax--media {
+      color: @red;
+    }
+  }
+
+  .syntax--keyword.syntax--important {
+    color: @red;
+  }
+
+}
+
+
+// Less/Sass should have their own files,
+// but for just a single override, here should be fine too
+
+.syntax--source.syntax--less,
+.syntax--source.syntax--scss {
+  .syntax--keyword.syntax--unit {
+    color: @cyan;
+  }
+}
diff --git a/packages/solarized-dark-syntax/styles/syntax/go.less b/packages/solarized-dark-syntax/styles/syntax-legacy/go.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/go.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/go.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/java.less b/packages/solarized-dark-syntax/styles/syntax-legacy/java.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/java.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/java.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/javascript.less b/packages/solarized-dark-syntax/styles/syntax-legacy/javascript.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/javascript.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/javascript.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/markdown.less b/packages/solarized-dark-syntax/styles/syntax-legacy/markdown.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/markdown.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/markdown.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/markup.less b/packages/solarized-dark-syntax/styles/syntax-legacy/markup.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/markup.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/markup.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/php.less b/packages/solarized-dark-syntax/styles/syntax-legacy/php.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/php.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/php.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/python.less b/packages/solarized-dark-syntax/styles/syntax-legacy/python.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/python.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/python.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/ruby.less b/packages/solarized-dark-syntax/styles/syntax-legacy/ruby.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/ruby.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/ruby.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/scala.less b/packages/solarized-dark-syntax/styles/syntax-legacy/scala.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/scala.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/scala.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/typescript.less b/packages/solarized-dark-syntax/styles/syntax-legacy/typescript.less
similarity index 100%
rename from packages/solarized-dark-syntax/styles/syntax/typescript.less
rename to packages/solarized-dark-syntax/styles/syntax-legacy/typescript.less
diff --git a/packages/solarized-dark-syntax/styles/syntax/base.less b/packages/solarized-dark-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..0b860d6cfca
--- /dev/null
+++ b/packages/solarized-dark-syntax/styles/syntax/base.less
@@ -0,0 +1,291 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return global let and int
+.syntax--keyword {
+  color: @green;
+
+  // super
+  &.syntax--function {
+    color: @yellow;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @yellow;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: @syntax-text-color;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @syntax-text-color;
+
+  // self cls iota
+  &.syntax--support {
+    color: @yellow;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @blue;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @blue;
+  }
+
+  // add
+  &.syntax--operator {
+    color: @blue;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @syntax-text-color;
+    }
+  }
+
+  // String Enum Class
+  &.syntax--type {
+    color: @blue;
+
+    // int dict char map
+    &.syntax--fundamental {
+      color: @green;
+    }
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @blue;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @yellow;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @syntax-text-color;
+}
+
+// "string"
+.syntax--string {
+  color: @cyan;
+
+  // {placeholder} %().2f
+  &.syntax--part {
+    color: @violet;
+  }
+
+  // ${ }
+  &.syntax--interpolation {
+    color: @syntax-text-color;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @cyan;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @violet;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @violet;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: @violet;
+    }
+  }
+}
+
+// literal 4 1.3 0x29
+.syntax--constant {
+  color: @magenta;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @cyan;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @blue;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @blue;
+    }
+  }
+
+  // true false nil
+  &.syntax--language {
+    color: @magenta;
+  }
+}
+
+// text
+.syntax--text {
+  color: @syntax-text-color;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @blue;
+  }
+
+  // >
+  &.syntax--quote.syntax--punctuation {
+    color: @violet;
+  }
+
+  &.syntax--list.syntax--punctuation {
+
+    // 1.
+    &.syntax--ordered {
+      color: @green;
+    }
+
+    // * -
+    &.syntax--unordered {
+      color: @yellow;
+    }
+  }
+
+  // **bold**
+  &.syntax--bold {
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    font-style: italic;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    font-style: italic;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @cyan;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @violet;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @cyan;
+
+    .syntax--punctuation {
+      color: @cyan;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--highlighted {
+    color: @cyan;
+
+    .syntax--punctuation {
+      color: @cyan;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @red;
+
+    .syntax--punctuation {
+      color: @red;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @yellow;
+
+    .syntax--punctuation {
+      color: @yellow;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @syntax-comment-color;
+
+    .syntax--punctuation {
+      color: @syntax-comment-color;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @syntax-comment-color;
+  font-style: italic;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: @syntax-subtle-color;
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: @syntax-subtle-color;
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @syntax-comment-color;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: @red !important;
+    text-decoration: underline !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: @yellow !important;
+    text-decoration: underline !important;
+  }
+}
diff --git a/packages/solarized-dark-syntax/styles/syntax/css.less b/packages/solarized-dark-syntax/styles/syntax/css.less
index 8bfaf8c3404..993c150f616 100644
--- a/packages/solarized-dark-syntax/styles/syntax/css.less
+++ b/packages/solarized-dark-syntax/styles/syntax/css.less
@@ -1,63 +1,128 @@
 .syntax--source.syntax--css {
 
-  .syntax--punctuation {
-    &.syntax--separator,
-    &.syntax--terminator {
+  // @media and or
+  .syntax--keyword {
+    color: @green;
+
+    // + = *=
+    &.syntax--symbolic {
       color: @syntax-text-color;
     }
-    &.syntax--property-list.syntax--begin,
-    &.syntax--property-list.syntax--end {
-      color: @red;
-    }
-    &.syntax--section.syntax--function {
-      color: @cyan;
+
+    // !important
+    &.syntax--important {
+      color: @green;
     }
   }
 
-  .syntax--entity.syntax--name {
-    color: @green;
-  }
-  .syntax--attribute-name.syntax--class,
-  .syntax--id {
-    color: @blue;
-  }
-  .syntax--pseudo-element,
-  .syntax--pseudo-class {
-    color: @orange;
-  }
+  .syntax--entity {
 
-  .syntax--property-value {
-    color: @cyan;
-  }
-  .syntax--constant.syntax--numeric {
-    color: @cyan;
-    .syntax--unit {
+    // function()
+    &.syntax--function {
       color: @cyan;
+
+      // url rgb
+      &.syntax--support {
+        color: @blue;
+      }
+    }
+
+    // #id .class
+    &.syntax--selector {
+      color: @magenta;
+
+      // div span
+      &.syntax--tag {
+        color: @blue;
+      }
+
+      // :pseudo-class ::pseudo-element
+      &.syntax--pseudo-class,
+      &.syntax--pseudo-element {
+        color: @yellow;
+      }
+    }
+
+    // href src alt
+    &.syntax--attribute {
+      color: @yellow;
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @syntax-subtle-color;
+
+      // height position border
+      &.syntax--support {
+        color: @syntax-text-color;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @syntax-text-color;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: @syntax-text-color;
     }
   }
-  .syntax--rgb-value {
-    color: @cyan;
-  }
-  .syntax--support.syntax--constant {
+
+  // property: constant
+  .syntax--constant {
     color: @cyan;
+
+    // tv tty
     &.syntax--media {
-      color: @red;
+      color: @yellow;
+
+      // print screen
+      &.syntax--support {
+        color: @yellow;
+      }
     }
-  }
 
-  .syntax--keyword.syntax--important {
-    color: @red;
+    // from to 50%
+    &.syntax--offset {
+      color: @syntax-text-color;
+
+      // %
+      &.syntax--unit {
+        color: @syntax-text-color;
+      }
+    }
   }
 
-}
+  .syntax--punctuation {
 
+    &.syntax--selector {
 
-// Less/Sass should have their own files,
-// but for just a single override, here should be fine too
+      // *
+      &.syntax--wildcard {
+        color: @blue;
+      }
 
-.syntax--source.syntax--less,
-.syntax--source.syntax--scss {
-  .syntax--keyword.syntax--unit {
-    color: @cyan;
+      // #
+      &.syntax--id {
+        color: @magenta;
+      }
+
+      // .
+      &.syntax--class {
+        color: @magenta;
+      }
+
+      // : ::
+      &.syntax--pseudo-class,
+      &.syntax--pseudo-element {
+        color: @yellow;
+      }
+    }
+
+    // ()
+    &.syntax--arguments {
+      color: @syntax-text-color;
+    }
   }
 }
diff --git a/packages/solarized-dark-syntax/styles/syntax/html.less b/packages/solarized-dark-syntax/styles/syntax/html.less
new file mode 100644
index 00000000000..ef8118ac351
--- /dev/null
+++ b/packages/solarized-dark-syntax/styles/syntax/html.less
@@ -0,0 +1,23 @@
+.syntax--source.syntax--html {
+
+  .syntax--punctuation {
+
+    // < />
+    &.syntax--tag {
+      color: @syntax-comment-color;
+    }
+
+    // =
+    &.syntax--pair.syntax--attribute-value {
+      color: @syntax-comment-color;
+    }
+  }
+
+  .syntax--meta {
+
+    // <!doctype html>
+    &.syntax--doctype {
+      color: @syntax-comment-color;
+    }
+  }
+}
diff --git a/packages/solarized-dark-syntax/styles/syntax/js.less b/packages/solarized-dark-syntax/styles/syntax/js.less
new file mode 100644
index 00000000000..5b0fc219b6c
--- /dev/null
+++ b/packages/solarized-dark-syntax/styles/syntax/js.less
@@ -0,0 +1,21 @@
+.syntax--source.syntax--js {
+
+  .syntax--jsx {
+    color: @syntax-text-color;
+
+    // Component
+    &.syntax--entity.syntax--type {
+      color: @blue;
+    }
+
+    // "string"
+    &.syntax--string {
+      color: @cyan;
+    }
+
+    // <div>text</div>
+    &.syntax--text {
+      color: @cyan;
+    }
+  }
+}
diff --git a/packages/solarized-light-syntax/index.less b/packages/solarized-light-syntax/index.less
index 3c3a0755a60..66afd1ccfb5 100644
--- a/packages/solarized-light-syntax/index.less
+++ b/packages/solarized-light-syntax/index.less
@@ -6,17 +6,22 @@
 @import "styles/editor.less";
 
 // Languages
-@import "styles/syntax/_base.less";
-@import "styles/syntax/c.less";
-@import "styles/syntax/coffee.less";
+@import "styles/syntax-legacy/_base.less";
+// @import "styles/syntax-legacy/c.less";
+@import "styles/syntax-legacy/coffee.less";
+@import "styles/syntax-legacy/css.less";
+// @import "styles/syntax-legacy/go.less";
+@import "styles/syntax-legacy/java.less";
+// @import "styles/syntax-legacy/javascript.less";
+@import "styles/syntax-legacy/markdown.less";
+@import "styles/syntax-legacy/markup.less";
+@import "styles/syntax-legacy/php.less";
+// @import "styles/syntax-legacy/python.less";
+// @import "styles/syntax-legacy/ruby.less";
+@import "styles/syntax-legacy/scala.less";
+@import "styles/syntax-legacy/typescript.less";
+
+@import "styles/syntax/base.less";
 @import "styles/syntax/css.less";
-@import "styles/syntax/go.less";
-@import "styles/syntax/java.less";
-@import "styles/syntax/javascript.less";
-@import "styles/syntax/markdown.less";
-@import "styles/syntax/markup.less";
-@import "styles/syntax/php.less";
-@import "styles/syntax/python.less";
-@import "styles/syntax/ruby.less";
-@import "styles/syntax/scala.less";
-@import "styles/syntax/typescript.less";
+@import "styles/syntax/html.less";
+@import "styles/syntax/js.less";
diff --git a/packages/solarized-light-syntax/styles/syntax/_base.less b/packages/solarized-light-syntax/styles/syntax-legacy/_base.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/_base.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/_base.less
diff --git a/packages/solarized-light-syntax/styles/syntax/c.less b/packages/solarized-light-syntax/styles/syntax-legacy/c.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/c.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/c.less
diff --git a/packages/solarized-light-syntax/styles/syntax/coffee.less b/packages/solarized-light-syntax/styles/syntax-legacy/coffee.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/coffee.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/coffee.less
diff --git a/packages/solarized-light-syntax/styles/syntax-legacy/css.less b/packages/solarized-light-syntax/styles/syntax-legacy/css.less
new file mode 100644
index 00000000000..8bfaf8c3404
--- /dev/null
+++ b/packages/solarized-light-syntax/styles/syntax-legacy/css.less
@@ -0,0 +1,63 @@
+.syntax--source.syntax--css {
+
+  .syntax--punctuation {
+    &.syntax--separator,
+    &.syntax--terminator {
+      color: @syntax-text-color;
+    }
+    &.syntax--property-list.syntax--begin,
+    &.syntax--property-list.syntax--end {
+      color: @red;
+    }
+    &.syntax--section.syntax--function {
+      color: @cyan;
+    }
+  }
+
+  .syntax--entity.syntax--name {
+    color: @green;
+  }
+  .syntax--attribute-name.syntax--class,
+  .syntax--id {
+    color: @blue;
+  }
+  .syntax--pseudo-element,
+  .syntax--pseudo-class {
+    color: @orange;
+  }
+
+  .syntax--property-value {
+    color: @cyan;
+  }
+  .syntax--constant.syntax--numeric {
+    color: @cyan;
+    .syntax--unit {
+      color: @cyan;
+    }
+  }
+  .syntax--rgb-value {
+    color: @cyan;
+  }
+  .syntax--support.syntax--constant {
+    color: @cyan;
+    &.syntax--media {
+      color: @red;
+    }
+  }
+
+  .syntax--keyword.syntax--important {
+    color: @red;
+  }
+
+}
+
+
+// Less/Sass should have their own files,
+// but for just a single override, here should be fine too
+
+.syntax--source.syntax--less,
+.syntax--source.syntax--scss {
+  .syntax--keyword.syntax--unit {
+    color: @cyan;
+  }
+}
diff --git a/packages/solarized-light-syntax/styles/syntax/go.less b/packages/solarized-light-syntax/styles/syntax-legacy/go.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/go.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/go.less
diff --git a/packages/solarized-light-syntax/styles/syntax/java.less b/packages/solarized-light-syntax/styles/syntax-legacy/java.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/java.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/java.less
diff --git a/packages/solarized-light-syntax/styles/syntax/javascript.less b/packages/solarized-light-syntax/styles/syntax-legacy/javascript.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/javascript.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/javascript.less
diff --git a/packages/solarized-light-syntax/styles/syntax/markdown.less b/packages/solarized-light-syntax/styles/syntax-legacy/markdown.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/markdown.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/markdown.less
diff --git a/packages/solarized-light-syntax/styles/syntax/markup.less b/packages/solarized-light-syntax/styles/syntax-legacy/markup.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/markup.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/markup.less
diff --git a/packages/solarized-light-syntax/styles/syntax/php.less b/packages/solarized-light-syntax/styles/syntax-legacy/php.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/php.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/php.less
diff --git a/packages/solarized-light-syntax/styles/syntax/python.less b/packages/solarized-light-syntax/styles/syntax-legacy/python.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/python.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/python.less
diff --git a/packages/solarized-light-syntax/styles/syntax/ruby.less b/packages/solarized-light-syntax/styles/syntax-legacy/ruby.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/ruby.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/ruby.less
diff --git a/packages/solarized-light-syntax/styles/syntax/scala.less b/packages/solarized-light-syntax/styles/syntax-legacy/scala.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/scala.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/scala.less
diff --git a/packages/solarized-light-syntax/styles/syntax/typescript.less b/packages/solarized-light-syntax/styles/syntax-legacy/typescript.less
similarity index 100%
rename from packages/solarized-light-syntax/styles/syntax/typescript.less
rename to packages/solarized-light-syntax/styles/syntax-legacy/typescript.less
diff --git a/packages/solarized-light-syntax/styles/syntax/base.less b/packages/solarized-light-syntax/styles/syntax/base.less
new file mode 100644
index 00000000000..b21bcbbcb42
--- /dev/null
+++ b/packages/solarized-light-syntax/styles/syntax/base.less
@@ -0,0 +1,286 @@
+/*
+   This defines styling rules for syntax classes.
+
+   See the naming conventions for a list of syntax classes:
+   https://flight-manual.atom.io/hacking-atom/sections/syntax-naming-conventions
+
+   When styling rules conflict:
+   - The last rule overrides previous rules.
+   - The rule with most classes and pseudo-classes overrides the last rule.
+*/
+
+// if for return global let and int
+.syntax--keyword {
+  color: @green;
+
+  // super
+  &.syntax--function {
+    color: @yellow;
+  }
+
+  // this self
+  &.syntax--variable {
+    color: @yellow;
+  }
+
+  // = + && | << ?
+  &.syntax--symbolic {
+    color: @syntax-text-color;
+  }
+}
+
+// identifier
+.syntax--entity {
+  color: @syntax-text-color;
+
+  // self cls iota
+  &.syntax--support {
+    color: @yellow;
+  }
+
+  // @entity.decorator
+  &.syntax--decorator:last-child {
+    color: @blue;
+  }
+
+  // label:
+  &.syntax--label {
+    text-decoration: underline;
+  }
+
+  // function method
+  &.syntax--function {
+    color: @blue;
+  }
+
+  // add
+  &.syntax--operator {
+    color: @blue;
+
+    // %>% <=>
+    &.syntax--symbolic {
+      color: @syntax-text-color;
+    }
+  }
+
+  // String Enum Class
+  &.syntax--type {
+    color: @blue;
+
+    // int dict char map
+    &.syntax--fundamental {
+      color: @green;
+    }
+  }
+
+  // div span
+  &.syntax--tag {
+    color: @blue;
+  }
+
+  // href src alt
+  &.syntax--attribute {
+    color: @yellow;
+  }
+}
+
+// () [] {} => @
+.syntax--punctuation {
+  color: @syntax-text-color;
+}
+
+// "string"
+.syntax--string {
+  color: @cyan;
+
+  // ${variable} %().2f
+  &.syntax--part {
+    color: @orange;
+  }
+
+  // /^reg[ex]?p/
+  &.syntax--regexp {
+    color: @cyan;
+
+    // ^ $ \b ? + i
+    &.syntax--language {
+      color: @orange;
+    }
+
+    // <variable> \1
+    &.syntax--variable {
+      color: @orange;
+    }
+
+    // ( ) [^ ] (?= ) | r" /
+    &.syntax--punctuation {
+      color: @orange;
+    }
+  }
+}
+
+// literal 4 1.3 0x29
+.syntax--constant {
+  color: @magenta;
+
+  // &lt; 'a'
+  &.syntax--character {
+    color: @cyan;
+
+    // \" \' \g \.
+    &.syntax--escape {
+      color: @blue;
+    }
+
+    // \u2661 \n \t \W .
+    &.syntax--code {
+      color: @blue;
+    }
+  }
+
+  // true false nil
+  &.syntax--language {
+    color: @magenta;
+  }
+}
+
+// text
+.syntax--text {
+  color: @syntax-text-color;
+}
+
+// __formatted__
+.syntax--markup {
+
+  // # Heading
+  &.syntax--heading {
+    color: @blue;
+  }
+
+  // >
+  &.syntax--quote.syntax--punctuation {
+    color: @violet;
+  }
+
+  &.syntax--list.syntax--punctuation {
+
+    // 1.
+    &.syntax--ordered {
+      color: @green;
+    }
+
+    // * -
+    &.syntax--unordered {
+      color: @yellow;
+    }
+  }
+
+  // **bold**
+  &.syntax--bold {
+    font-weight: bold;
+  }
+
+  // *italic*
+  &.syntax--italic {
+    font-style: italic;
+  }
+
+  // `raw`
+  &.syntax--raw {
+    font-style: italic;
+  }
+
+  // url.com (path)
+  &.syntax--link {
+    color: @cyan;
+  }
+
+  // [alt] ![alt]
+  &.syntax--alt {
+    color: @violet;
+  }
+
+  // {++ inserted ++}
+  &.syntax--inserted {
+    color: @cyan;
+
+    .syntax--punctuation {
+      color: @cyan;
+    }
+  }
+
+  // {== highlighted ==}
+  &.syntax--highlighted {
+    color: @cyan;
+
+    .syntax--punctuation {
+      color: @cyan;
+    }
+  }
+
+  // {-- deleted --}
+  &.syntax--deleted {
+    color: @red;
+
+    .syntax--punctuation {
+      color: @red;
+    }
+  }
+
+  // {~~ from~>to ~~}
+  &.syntax--changed {
+    color: @yellow;
+
+    .syntax--punctuation {
+      color: @yellow;
+    }
+  }
+
+  // {>> commented <<}
+  &.syntax--commented {
+    color: @syntax-comment-color;
+
+    .syntax--punctuation {
+      color: @syntax-comment-color;
+    }
+  }
+}
+
+// /* comment */
+.syntax--comment {
+  color: @syntax-comment-color;
+  font-style: italic;
+
+  // @param TODO NOTE
+  &.syntax--caption {
+    color: @syntax-subtle-color;
+    font-weight: bold;
+  }
+
+  // variable function type
+  &.syntax--term {
+    color: @syntax-subtle-color;
+  }
+
+  // { } / .
+  &.syntax--punctuation {
+    color: @syntax-comment-color;
+    font-weight: normal;
+  }
+}
+
+// 0invalid
+.syntax--invalid:not(.syntax--punctuation) {
+
+  // §illegal
+  &.syntax--illegal {
+    color: @red !important;
+    text-decoration: underline !important;
+  }
+
+  // obsolete()
+  &.syntax--deprecated {
+    color: @yellow !important;
+    text-decoration: underline !important;
+  }
+}
diff --git a/packages/solarized-light-syntax/styles/syntax/css.less b/packages/solarized-light-syntax/styles/syntax/css.less
index 8bfaf8c3404..993c150f616 100644
--- a/packages/solarized-light-syntax/styles/syntax/css.less
+++ b/packages/solarized-light-syntax/styles/syntax/css.less
@@ -1,63 +1,128 @@
 .syntax--source.syntax--css {
 
-  .syntax--punctuation {
-    &.syntax--separator,
-    &.syntax--terminator {
+  // @media and or
+  .syntax--keyword {
+    color: @green;
+
+    // + = *=
+    &.syntax--symbolic {
       color: @syntax-text-color;
     }
-    &.syntax--property-list.syntax--begin,
-    &.syntax--property-list.syntax--end {
-      color: @red;
-    }
-    &.syntax--section.syntax--function {
-      color: @cyan;
+
+    // !important
+    &.syntax--important {
+      color: @green;
     }
   }
 
-  .syntax--entity.syntax--name {
-    color: @green;
-  }
-  .syntax--attribute-name.syntax--class,
-  .syntax--id {
-    color: @blue;
-  }
-  .syntax--pseudo-element,
-  .syntax--pseudo-class {
-    color: @orange;
-  }
+  .syntax--entity {
 
-  .syntax--property-value {
-    color: @cyan;
-  }
-  .syntax--constant.syntax--numeric {
-    color: @cyan;
-    .syntax--unit {
+    // function()
+    &.syntax--function {
       color: @cyan;
+
+      // url rgb
+      &.syntax--support {
+        color: @blue;
+      }
+    }
+
+    // #id .class
+    &.syntax--selector {
+      color: @magenta;
+
+      // div span
+      &.syntax--tag {
+        color: @blue;
+      }
+
+      // :pseudo-class ::pseudo-element
+      &.syntax--pseudo-class,
+      &.syntax--pseudo-element {
+        color: @yellow;
+      }
+    }
+
+    // href src alt
+    &.syntax--attribute {
+      color: @yellow;
+    }
+
+    // property: constant
+    &.syntax--property {
+      color: @syntax-subtle-color;
+
+      // height position border
+      &.syntax--support {
+        color: @syntax-text-color;
+      }
+    }
+
+    // --variable
+    &.syntax--variable {
+      color: @syntax-text-color;
+    }
+
+    // @keyframes keyframe
+    &.syntax--keyframe {
+      color: @syntax-text-color;
     }
   }
-  .syntax--rgb-value {
-    color: @cyan;
-  }
-  .syntax--support.syntax--constant {
+
+  // property: constant
+  .syntax--constant {
     color: @cyan;
+
+    // tv tty
     &.syntax--media {
-      color: @red;
+      color: @yellow;
+
+      // print screen
+      &.syntax--support {
+        color: @yellow;
+      }
     }
-  }
 
-  .syntax--keyword.syntax--important {
-    color: @red;
+    // from to 50%
+    &.syntax--offset {
+      color: @syntax-text-color;
+
+      // %
+      &.syntax--unit {
+        color: @syntax-text-color;
+      }
+    }
   }
 
-}
+  .syntax--punctuation {
 
+    &.syntax--selector {
 
-// Less/Sass should have their own files,
-// but for just a single override, here should be fine too
+      // *
+      &.syntax--wildcard {
+        color: @blue;
+      }
 
-.syntax--source.syntax--less,
-.syntax--source.syntax--scss {
-  .syntax--keyword.syntax--unit {
-    color: @cyan;
+      // #
+      &.syntax--id {
+        color: @magenta;
+      }
+
+      // .
+      &.syntax--class {
+        color: @magenta;
+      }
+
+      // : ::
+      &.syntax--pseudo-class,
+      &.syntax--pseudo-element {
+        color: @yellow;
+      }
+    }
+
+    // ()
+    &.syntax--arguments {
+      color: @syntax-text-color;
+    }
   }
 }
diff --git a/packages/solarized-light-syntax/styles/syntax/html.less b/packages/solarized-light-syntax/styles/syntax/html.less
new file mode 100644
index 00000000000..ef8118ac351
--- /dev/null
+++ b/packages/solarized-light-syntax/styles/syntax/html.less
@@ -0,0 +1,23 @@
+.syntax--source.syntax--html {
+
+  .syntax--punctuation {
+
+    // < />
+    &.syntax--tag {
+      color: @syntax-comment-color;
+    }
+
+    // =
+    &.syntax--pair.syntax--attribute-value {
+      color: @syntax-comment-color;
+    }
+  }
+
+  .syntax--meta {
+
+    // <!doctype html>
+    &.syntax--doctype {
+      color: @syntax-comment-color;
+    }
+  }
+}
diff --git a/packages/solarized-light-syntax/styles/syntax/js.less b/packages/solarized-light-syntax/styles/syntax/js.less
new file mode 100644
index 00000000000..5b0fc219b6c
--- /dev/null
+++ b/packages/solarized-light-syntax/styles/syntax/js.less
@@ -0,0 +1,21 @@
+.syntax--source.syntax--js {
+
+  .syntax--jsx {
+    color: @syntax-text-color;
+
+    // Component
+    &.syntax--entity.syntax--type {
+      color: @blue;
+    }
+
+    // "string"
+    &.syntax--string {
+      color: @cyan;
+    }
+
+    // <div>text</div>
+    &.syntax--text {
+      color: @cyan;
+    }
+  }
+}