Implement naming conventions in default themes (atom#20524)

Update of the default syntax themes to implement [naming conventions](atom/flight-manual.atom.io#564) for syntax scopes. Adds the [template](atom/apm#883) to each theme with custom colors, to accommodate the naming conventions. There should be no compatibility break with existing grammars. As naming conventions are implemented in more language grammars, their old specific stylesheets can be retired.
GulajavaMinistudio · Feb 19, 2021 · eb064bf · eb064bf
1 parent ff1e4f6
commit eb064bf
Show file tree

Hide file tree

Showing 100 changed files with 3,479 additions and 156 deletions.
diff --git 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 → ...rk-syntax/styles/syntax-legacy/_base.less b/packages/atom-dark-syntax/styles/syntax.less → ...rk-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
@@ -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
@@ -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;
+    }
+  }
+}