From eb064bf502cc91c7209546544973bdbdad054394 Mon Sep 17 00:00:00 2001 From: chbk Date: Fri, 19 Feb 2021 06:55:25 +0100 Subject: [PATCH] Implement naming conventions in default themes (#20524) Update of the default syntax themes to implement [naming conventions](https://github.com/atom/flight-manual.atom.io/pull/564) for syntax scopes. Adds the [template](https://github.com/atom/apm/pull/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. --- packages/atom-dark-syntax/index.less | 6 +- .../{syntax.less => syntax-legacy/_base.less} | 0 .../atom-dark-syntax/styles/syntax/base.less | 267 +++++++++++++++ .../atom-dark-syntax/styles/syntax/css.less | 106 ++++++ .../atom-dark-syntax/styles/syntax/html.less | 18 + packages/atom-light-syntax/index.less | 5 +- .../{syntax.less => syntax-legacy/_base.less} | 0 .../atom-light-syntax/styles/syntax/base.less | 232 +++++++++++++ .../atom-light-syntax/styles/syntax/css.less | 108 ++++++ .../base16-tomorrow-dark-theme/index.less | 9 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/cs.less | 0 .../{syntax => syntax-legacy}/json.less | 0 .../styles/syntax/base.less | 293 ++++++++++++++++ .../styles/syntax/css.less | 113 +++++++ .../base16-tomorrow-light-theme/index.less | 9 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/cs.less | 0 .../{syntax => syntax-legacy}/json.less | 0 .../styles/syntax/base.less | 293 ++++++++++++++++ .../styles/syntax/css.less | 113 +++++++ packages/one-dark-syntax/index.less | 35 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/c.less | 0 .../styles/{syntax => syntax-legacy}/cpp.less | 0 .../styles/{syntax => syntax-legacy}/cs.less | 0 .../styles/syntax-legacy/css.less | 10 + .../{syntax => syntax-legacy}/elixir.less | 0 .../styles/{syntax => syntax-legacy}/gfm.less | 0 .../styles/{syntax => syntax-legacy}/go.less | 0 .../styles/{syntax => syntax-legacy}/ini.less | 0 .../{syntax => syntax-legacy}/java.less | 0 .../{syntax => syntax-legacy}/javascript.less | 0 .../{syntax => syntax-legacy}/json.less | 0 .../styles/{syntax => syntax-legacy}/ng.less | 0 .../styles/{syntax => syntax-legacy}/php.less | 0 .../{syntax => syntax-legacy}/python.less | 0 .../{syntax => syntax-legacy}/ruby.less | 0 .../{syntax => syntax-legacy}/typescript.less | 0 .../one-dark-syntax/styles/syntax/base.less | 312 ++++++++++++++++++ .../one-dark-syntax/styles/syntax/css.less | 99 +++++- packages/one-light-syntax/index.less | 35 +- packages/one-light-syntax/styles/colors.less | 4 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/c.less | 0 .../styles/{syntax => syntax-legacy}/cpp.less | 0 .../styles/{syntax => syntax-legacy}/cs.less | 0 .../styles/syntax-legacy/css.less | 12 + .../{syntax => syntax-legacy}/elixir.less | 0 .../styles/{syntax => syntax-legacy}/gfm.less | 0 .../styles/{syntax => syntax-legacy}/go.less | 0 .../styles/{syntax => syntax-legacy}/ini.less | 0 .../{syntax => syntax-legacy}/java.less | 0 .../{syntax => syntax-legacy}/javascript.less | 0 .../{syntax => syntax-legacy}/json.less | 0 .../styles/{syntax => syntax-legacy}/ng.less | 0 .../styles/{syntax => syntax-legacy}/php.less | 0 .../{syntax => syntax-legacy}/python.less | 0 .../{syntax => syntax-legacy}/ruby.less | 0 .../{syntax => syntax-legacy}/typescript.less | 0 .../one-light-syntax/styles/syntax/base.less | 312 ++++++++++++++++++ .../one-light-syntax/styles/syntax/css.less | 97 +++++- packages/solarized-dark-syntax/index.less | 31 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/c.less | 0 .../{syntax => syntax-legacy}/coffee.less | 0 .../styles/syntax-legacy/css.less | 63 ++++ .../styles/{syntax => syntax-legacy}/go.less | 0 .../{syntax => syntax-legacy}/java.less | 0 .../{syntax => syntax-legacy}/javascript.less | 0 .../{syntax => syntax-legacy}/markdown.less | 0 .../{syntax => syntax-legacy}/markup.less | 0 .../styles/{syntax => syntax-legacy}/php.less | 0 .../{syntax => syntax-legacy}/python.less | 0 .../{syntax => syntax-legacy}/ruby.less | 0 .../{syntax => syntax-legacy}/scala.less | 0 .../{syntax => syntax-legacy}/typescript.less | 0 .../styles/syntax/base.less | 291 ++++++++++++++++ .../styles/syntax/css.less | 147 ++++++--- .../styles/syntax/html.less | 23 ++ .../styles/syntax/js.less | 21 ++ packages/solarized-light-syntax/index.less | 31 +- .../{syntax => syntax-legacy}/_base.less | 0 .../styles/{syntax => syntax-legacy}/c.less | 0 .../{syntax => syntax-legacy}/coffee.less | 0 .../styles/syntax-legacy/css.less | 63 ++++ .../styles/{syntax => syntax-legacy}/go.less | 0 .../{syntax => syntax-legacy}/java.less | 0 .../{syntax => syntax-legacy}/javascript.less | 0 .../{syntax => syntax-legacy}/markdown.less | 0 .../{syntax => syntax-legacy}/markup.less | 0 .../styles/{syntax => syntax-legacy}/php.less | 0 .../{syntax => syntax-legacy}/python.less | 0 .../{syntax => syntax-legacy}/ruby.less | 0 .../{syntax => syntax-legacy}/scala.less | 0 .../{syntax => syntax-legacy}/typescript.less | 0 .../styles/syntax/base.less | 286 ++++++++++++++++ .../styles/syntax/css.less | 147 ++++++--- .../styles/syntax/html.less | 23 ++ .../styles/syntax/js.less | 21 ++ 100 files changed, 3479 insertions(+), 156 deletions(-) rename packages/atom-dark-syntax/styles/{syntax.less => syntax-legacy/_base.less} (100%) create mode 100644 packages/atom-dark-syntax/styles/syntax/base.less create mode 100644 packages/atom-dark-syntax/styles/syntax/css.less create mode 100644 packages/atom-dark-syntax/styles/syntax/html.less rename packages/atom-light-syntax/styles/{syntax.less => syntax-legacy/_base.less} (100%) create mode 100644 packages/atom-light-syntax/styles/syntax/base.less create mode 100644 packages/atom-light-syntax/styles/syntax/css.less rename packages/base16-tomorrow-dark-theme/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/base16-tomorrow-dark-theme/styles/{syntax => syntax-legacy}/cs.less (100%) rename packages/base16-tomorrow-dark-theme/styles/{syntax => syntax-legacy}/json.less (100%) create mode 100644 packages/base16-tomorrow-dark-theme/styles/syntax/base.less create mode 100644 packages/base16-tomorrow-dark-theme/styles/syntax/css.less rename packages/base16-tomorrow-light-theme/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/base16-tomorrow-light-theme/styles/{syntax => syntax-legacy}/cs.less (100%) rename packages/base16-tomorrow-light-theme/styles/{syntax => syntax-legacy}/json.less (100%) create mode 100644 packages/base16-tomorrow-light-theme/styles/syntax/base.less create mode 100644 packages/base16-tomorrow-light-theme/styles/syntax/css.less rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/c.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/cpp.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/cs.less (100%) create mode 100644 packages/one-dark-syntax/styles/syntax-legacy/css.less rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/elixir.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/gfm.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/go.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/ini.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/java.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/javascript.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/json.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/ng.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/php.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/python.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/ruby.less (100%) rename packages/one-dark-syntax/styles/{syntax => syntax-legacy}/typescript.less (100%) create mode 100644 packages/one-dark-syntax/styles/syntax/base.less rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/c.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/cpp.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/cs.less (100%) create mode 100644 packages/one-light-syntax/styles/syntax-legacy/css.less rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/elixir.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/gfm.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/go.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/ini.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/java.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/javascript.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/json.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/ng.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/php.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/python.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/ruby.less (100%) rename packages/one-light-syntax/styles/{syntax => syntax-legacy}/typescript.less (100%) create mode 100644 packages/one-light-syntax/styles/syntax/base.less rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/c.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/coffee.less (100%) create mode 100644 packages/solarized-dark-syntax/styles/syntax-legacy/css.less rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/go.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/java.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/javascript.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/markdown.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/markup.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/php.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/python.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/ruby.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/scala.less (100%) rename packages/solarized-dark-syntax/styles/{syntax => syntax-legacy}/typescript.less (100%) create mode 100644 packages/solarized-dark-syntax/styles/syntax/base.less create mode 100644 packages/solarized-dark-syntax/styles/syntax/html.less create mode 100644 packages/solarized-dark-syntax/styles/syntax/js.less rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/_base.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/c.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/coffee.less (100%) create mode 100644 packages/solarized-light-syntax/styles/syntax-legacy/css.less rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/go.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/java.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/javascript.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/markdown.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/markup.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/php.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/python.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/ruby.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/scala.less (100%) rename packages/solarized-light-syntax/styles/{syntax => syntax-legacy}/typescript.less (100%) create mode 100644 packages/solarized-light-syntax/styles/syntax/base.less create mode 100644 packages/solarized-light-syntax/styles/syntax/html.less create mode 100644 packages/solarized-light-syntax/styles/syntax/js.less 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; + } + + // \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; + } + + // < '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 { + + // + &.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; + } + + // \1 + &.syntax--variable { + color: #008080; + } + + // ( ) [^ ] (?= ) | r" / + &.syntax--punctuation { + color: #222; + } + } +} + +// literal 4 1.3 +.syntax--constant { + color: #D14; + + // < '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; + } + + // \1 + &.syntax--variable { + color: @blue; + } + + // ( ) [^ ] (?= ) | r" / + &.syntax--punctuation { + color: @brown; + } + } +} + +// literal 4 1.3 true nil +.syntax--constant { + color: @orange; + + // < '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; + } + + // \1 + &.syntax--variable { + color: @blue; + } + + // ( ) [^ ] (?= ) | r" / + &.syntax--punctuation { + color: @brown; + } + } +} + +// literal 4 1.3 true nil +.syntax--constant { + color: @orange; + + // < '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; + } + + // \1 + &.syntax--variable { + color: @hue-2; + } + + // ( ) [^ ] (?= ) | + &.syntax--punctuation { + color: @hue-3; + } + } +} + +// literal 4 1.3 true nil +.syntax--constant { + color: @hue-6; + + // < '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; + } + + // \1 + &.syntax--variable { + color: @hue-2; + } + + // ( ) [^ ] (?= ) | + &.syntax--punctuation { + color: @hue-3; + } + } +} + +// literal 4 1.3 true nil +.syntax--constant { + color: @hue-6; + + // < '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; + } + + // \1 + &.syntax--variable { + color: @violet; + } + + // ( ) [^ ] (?= ) | r" / + &.syntax--punctuation { + color: @violet; + } + } +} + +// literal 4 1.3 0x29 +.syntax--constant { + color: @magenta; + + // < '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 { + + // + &.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; + } + + //
text
+ &.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; + } + + // \1 + &.syntax--variable { + color: @orange; + } + + // ( ) [^ ] (?= ) | r" / + &.syntax--punctuation { + color: @orange; + } + } +} + +// literal 4 1.3 0x29 +.syntax--constant { + color: @magenta; + + // < '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 { + + // + &.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; + } + + //
text
+ &.syntax--text { + color: @cyan; + } + } +}