From e67e927183c41c63a48a4d812138522099bf9dea Mon Sep 17 00:00:00 2001 From: chbk Date: Sat, 14 Dec 2019 15:22:49 +0100 Subject: [PATCH 1/2] Implement naming conventions --- templates/theme/index.less | 4 +- templates/theme/styles/base.less | 301 -------------------------- templates/theme/styles/editor.less | 56 +++++ templates/theme/styles/syntax.less | 337 +++++++++++++++++++++++++++++ 4 files changed, 396 insertions(+), 302 deletions(-) delete mode 100644 templates/theme/styles/base.less create mode 100644 templates/theme/styles/editor.less create mode 100644 templates/theme/styles/syntax.less diff --git a/templates/theme/index.less b/templates/theme/index.less index d076b67b5..8d0a86859 100644 --- a/templates/theme/index.less +++ b/templates/theme/index.less @@ -1 +1,3 @@ -@import "./styles/base.less"; +@import "styles/syntax-variables.less"; +@import "styles/syntax.less"; +@import "styles/editor.less"; diff --git a/templates/theme/styles/base.less b/templates/theme/styles/base.less deleted file mode 100644 index fcc09434e..000000000 --- a/templates/theme/styles/base.less +++ /dev/null @@ -1,301 +0,0 @@ -@import "syntax-variables"; - -atom-text-editor { - background-color: @syntax-background-color; - color: @syntax-text-color; - - .wrap-guide { - background-color: @syntax-wrap-guide-color; - } - - .indent-guide { - color: @syntax-indent-guide-color; - } - - .invisible-character { - color: @syntax-invisible-character-color; - } - - .gutter { - background-color: @syntax-gutter-background-color; - color: @syntax-gutter-text-color; - - .line-number { - &.cursor-line { - background-color: @syntax-gutter-background-color-selected; - color: @syntax-gutter-text-color-selected; - } - - &.cursor-line-no-selection { - color: @syntax-gutter-text-color-selected; - } - } - } - - .gutter .line-number.folded, - .gutter .line-number:after, - .fold-marker:after { - color: @light-gray; - } - - .invisible { - color: @syntax-text-color; - } - - .cursor { - color: @syntax-cursor-color; - } - - .selection .region { - background-color: @syntax-selection-color; - } -} - - -// Syntax styles - -.syntax--comment { - color: @light-gray; -} - -.syntax--keyword { - color: @purple; - - &.syntax--control { - color: @purple; - } - - &.syntax--operator { - color: @syntax-text-color; - } - - &.syntax--other.syntax--special-method { - color: @blue; - } - - &.syntax--other.syntax--unit { - color: @orange; - } -} - -.syntax--storage { - color: @purple; -} - -.syntax--constant { - color: @orange; - - &.syntax--character.syntax--escape { - color: @cyan; - } - - &.syntax--numeric { - color: @orange; - } - - &.syntax--other.syntax--color { - color: @cyan; - } - - &.syntax--other.syntax--symbol { - color: @green; - } -} - -.syntax--variable { - color: @red; - - &.syntax--interpolation { - color: darken(@red, 10%); - } - - &.syntax--parameter.syntax--function { - color: @syntax-text-color; - } -} - -.syntax--invalid.syntax--illegal { - background-color: @red; - color: @syntax-background-color; -} - -.syntax--string { - color: @green; - - - &.syntax--regexp { - color: @cyan; - - .syntax--source.syntax--ruby.syntax--embedded { - color: @orange; - } - } - - &.syntax--other.syntax--link { - color: @red; - } -} - -.syntax--punctuation { - &.syntax--definition { - &.syntax--comment { - color: @light-gray; - } - - &.syntax--string, - &.syntax--variable, - &.syntax--parameters, - &.syntax--array { - color: @syntax-text-color; - } - - &.syntax--heading, - &.syntax--identity { - color: @blue; - } - - &.syntax--bold { - color: @light-orange; - font-weight: bold; - } - - &.syntax--italic { - color: @purple; - font-style: italic; - } - } - - &.syntax--section.syntax--embedded { - color: darken(@red, 10%); - } - -} - -.syntax--support { - &.syntax--class { - color: @light-orange; - } - - &.syntax--function { - color: @cyan; - - &.syntax--any-method { - color: @blue; - } - } -} - -.syntax--entity { - &.syntax--name.syntax--function { - color: @blue; - } - &.syntax--name.syntax--type { - color: @light-orange; - text-decoration: underline; - } - - &.syntax--other.syntax--inherited-class { - color: @green; - } - &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class { - color: @light-orange; - } - - &.syntax--name.syntax--section { - color: @blue; - } - - &.syntax--name.syntax--tag { - color: @red; - text-decoration: underline; - } - - &.syntax--other.syntax--attribute-name { - color: @orange; - - &.syntax--id { - color: @blue; - } - } -} - -.syntax--meta { - &.syntax--class { - color: @light-orange; - } - - &.syntax--link { - color: @orange; - } - - &.syntax--require { - color: @blue; - } - - &.syntax--selector { - color: @purple; - } - - &.syntax--separator { - background-color: @gray; - color: @syntax-text-color; - } -} - -.syntax--none { - color: @syntax-text-color; -} - -.syntax--markup { - &.syntax--bold { - color: @orange; - font-weight: bold; - } - - &.syntax--changed { - color: @purple; - } - - &.syntax--deleted { - color: @red; - } - - &.syntax--italic { - color: @purple; - font-style: italic; - } - - &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading { - color: @blue; - } - - &.syntax--inserted { - color: @green; - } - - &.syntax--list { - color: @red; - } - - &.syntax--quote { - color: @orange; - } - - &.syntax--raw.syntax--inline { - color: @green; - } -} - -.syntax--source.syntax--gfm .syntax--markup { - -webkit-font-smoothing: auto; - &.syntax--heading { - color: @green; - } -} - - -// Mini editor - -atom-text-editor[mini] .scroll-view { - padding-left: 1px; -} diff --git a/templates/theme/styles/editor.less b/templates/theme/styles/editor.less new file mode 100644 index 000000000..8cd35dea3 --- /dev/null +++ b/templates/theme/styles/editor.less @@ -0,0 +1,56 @@ +// This defines styling rules for the editor. + +atom-text-editor { + background-color: @syntax-background-color; + color: @syntax-text-color; + + .wrap-guide { + background-color: @syntax-wrap-guide-color; + } + + .indent-guide { + color: @syntax-indent-guide-color; + } + + .invisible-character { + color: @syntax-invisible-character-color; + } + + .gutter { + background-color: @syntax-gutter-background-color; + color: @syntax-gutter-text-color; + + .line-number { + &.cursor-line { + background-color: @syntax-gutter-background-color-selected; + color: @syntax-gutter-text-color-selected; + } + + &.cursor-line-no-selection { + color: @syntax-gutter-text-color-selected; + } + } + } + + .gutter .line-number.folded, + .gutter .line-number:after, + .fold-marker:after { + color: @light-gray; + } + + .invisible { + color: @syntax-text-color; + } + + .cursor { + color: @syntax-cursor-color; + } + + .selection .region { + background-color: @syntax-selection-color; + } +} + +atom-text-editor[mini] .scroll-view { + padding-left: 1px; +} diff --git a/templates/theme/styles/syntax.less b/templates/theme/styles/syntax.less new file mode 100644 index 000000000..00d277579 --- /dev/null +++ b/templates/theme/styles/syntax.less @@ -0,0 +1,337 @@ +/* + 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 import +.syntax--keyword { + color: @purple; + + // global static let class + &.syntax--storage { + color: @purple; + } + + // int char float + &.syntax--type { + color: @purple; + text-decoration: underline; + } + + // and or new del + &.syntax--operator { + color: @very-light-gray; + } + + // super + &.syntax--function { + color: @red; + } + + // this self + &.syntax--variable { + color: @red; + } + + // = + && | << ? + &.syntax--symbolic { + color: @very-light-gray; + } +} + +// identifier +.syntax--entity { + color: @very-light-gray; + + // function(parameter) + &.syntax--parameter { + color: @very-light-gray; + } + + // self cls iota + &.syntax--support { + color: @red; + } + + // function method + &.syntax--function { + color: @blue; + + // len print + &.syntax--support { + color: @cyan; + } + } + + // add + &.syntax--operator { + color: @blue; + + // %>% <=> + &.syntax--symbolic { + color: @very-light-gray; + } + } + + // Class + &.syntax--type { + color: @light-orange; + text-decoration: underline; + + // String List + &.syntax--support { + color: @light-orange; + } + + // dict map float32 + &.syntax--fundamental { + color: @purple; + } + } + + // .class :pseudo-class + &.syntax--selector { + color: @light-orange; + + // #id + &.syntax--id { + color: @blue; + } + } + + // div span + &.syntax--tag { + color: @red; + text-decoration: underline; + } + + // href src alt + &.syntax--attribute { + color: @orange; + } + + // height position border + &.syntax--property { + color: @very-light-gray; + } +} + +// () [] {} => @ +.syntax--punctuation { + color: @very-light-gray; +} + +// "string" +.syntax--string { + color: @green; + + // :immutable + &.syntax--immutable { + color: @green; + } + + // ${variable} %().2f {0:<30} + &.syntax--part { + color: darken(@green, 15%); + } + + // /^reg[ex]?p/ + &.syntax--regexp { + color: @green; + + // ^ $ \b ? + i + &.syntax--language { + color: @cyan; + } + + // \1 + &.syntax--variable { + color: @cyan; + } + + // r" / + &.syntax--punctuation { + color: @green; + + // ( ) [^ ] (?= ) | + &.syntax--part { + color: @cyan; + } + } + } +} + +// literal +.syntax--constant { + color: @orange; + + // < 'a' + &.syntax--character { + color: @green; + + // \" \' \g \. + &.syntax--escape { + color: @green; + } + + // \u2661 \n \t \W . + &.syntax--code { + color: @cyan; + } + } + + // 4 1.3 0x29 + &.syntax--numeric { + color: @orange; + + // px % cm hz + &.syntax--unit { + color: @orange; + } + } + + // #b294bb + &.syntax--color { + color: @cyan; + } + + // true false nil + &.syntax--language { + color: @orange; + + // ... + &.syntax--symbolic { + color: @very-light-gray; + } + } +} + +// text +.syntax--text { + color: @very-light-gray; +} + +// __formatted__ +.syntax--markup { + color: @red; + + // # Heading + &.syntax--heading { + color: @blue; + } + + // - item + &.syntax--list { + color: @red; + } + + // > quote + &.syntax--quote { + color: @orange; + } + + // **bold** + &.syntax--bold { + color: @orange; + font-weight: bold; + } + + // *italic* + &.syntax--italic { + color: @purple; + font-style: italic; + } + + // __underline__ + &.syntax--underline { + color: @orange; + text-decoration: underline; + } + + // ~~strike~~ + &.syntax--strike { + color: @red; + } + + // `raw` + &.syntax--raw { + color: @green; + } + + // url.com (path) [reference] + &.syntax--link { + color: @orange; + } + + // {++ inserted ++} + &.syntax--inserted { + color: @green; + } + + // {== inserted ==} + &.syntax--highlighted { + color: @green; + } + + // {-- deleted --} + &.syntax--deleted { + color: @red; + } + + // {~~ from~>to ~~} + &.syntax--changed { + color: @orange; + } + + // {>> commented <<} + &.syntax--commented { + color: @light-gray; + } +} + +// /* comment */ +.syntax--comment { + color: @light-gray; + + // @param TODO NOTE + &.syntax--caption { + color: lighten(@light-gray, 5); + font-weight: bold; + text-decoration: underline; + } + + // variable function type + &.syntax--term { + color: lighten(@light-gray, 5); + font-weight: bold; + } + + // { } / . + &.syntax--punctuation { + color: @light-gray; + font-weight: normal; + text-decoration: none; + } +} + +// 0invalid +.syntax--invalid:not(.syntax--punctuation) { + + // §illegal + &.syntax--illegal { + background-color: @red; + color: @syntax-background-color; + } + + // obsolete() + &.syntax--deprecated { + color: @red; + text-decoration: underline; + } +} From de1782aea6b5ba6ec99b1cd282510797f9577f58 Mon Sep 17 00:00:00 2001 From: chbk Date: Tue, 17 Mar 2020 16:50:37 +0100 Subject: [PATCH 2/2] Update specs --- spec/init-spec.coffee | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/spec/init-spec.coffee b/spec/init-spec.coffee index 5d4d64228..7c6835b52 100644 --- a/spec/init-spec.coffee +++ b/spec/init-spec.coffee @@ -128,8 +128,10 @@ describe "apm init", -> runs -> expect(fs.existsSync(themePath)).toBeTruthy() expect(fs.existsSync(path.join(themePath, 'styles'))).toBeTruthy() - expect(fs.existsSync(path.join(themePath, 'styles', 'base.less'))).toBeTruthy() + expect(fs.existsSync(path.join(themePath, 'styles', 'colors.less'))).toBeTruthy() expect(fs.existsSync(path.join(themePath, 'styles', 'syntax-variables.less'))).toBeTruthy() + expect(fs.existsSync(path.join(themePath, 'styles', 'syntax.less'))).toBeTruthy() + expect(fs.existsSync(path.join(themePath, 'styles', 'editor.less'))).toBeTruthy() expect(fs.existsSync(path.join(themePath, 'index.less'))).toBeTruthy() expect(fs.existsSync(path.join(themePath, 'README.md'))).toBeTruthy() expect(fs.existsSync(path.join(themePath, 'package.json'))).toBeTruthy()