From c7467cba313401352ee9d789c54bd4da261984bf Mon Sep 17 00:00:00 2001 From: Chris Parana Date: Mon, 30 Apr 2018 16:56:44 -0400 Subject: [PATCH] First commit --- .gitignore | 3 + README.md | 1 + index.less | 1 + package.json | 15 ++ styles/base.less | 301 +++++++++++++++++++++++++++++++++++ styles/colors.less | 37 +++++ styles/syntax-variables.less | 31 ++++ 7 files changed, 389 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.less create mode 100644 package.json create mode 100644 styles/base.less create mode 100644 styles/colors.less create mode 100644 styles/syntax-variables.less diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ade14b9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +npm-debug.log +node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..a8c78cf --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +This is a dark and colorful syntax theme. diff --git a/index.less b/index.less new file mode 100644 index 0000000..d076b67 --- /dev/null +++ b/index.less @@ -0,0 +1 @@ +@import "./styles/base.less"; diff --git a/package.json b/package.json new file mode 100644 index 0000000..2c2b5e1 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "CP-syntax", + "theme": "syntax", + "version": "0.4.0", + "description": "A dark and colorful syntax theme", + "keywords": [ + "syntax", + "theme" + ], + "repository": "https://github.com/atom/cp-syntax", + "license": "MIT", + "engines": { + "atom": ">=1.0.0 <2.0.0" + } +} diff --git a/styles/base.less b/styles/base.less new file mode 100644 index 0000000..404c2c7 --- /dev/null +++ b/styles/base.less @@ -0,0 +1,301 @@ +@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: @cyan; + } + + &.syntax--other.syntax--unit { + color: @orange; + } +} + +.syntax--storage { + color: @purple; +} + +.syntax--constant { + color: @orange; + + &.syntax--character.syntax--escape { + color: @magenta; + } + + &.syntax--numeric { + color: @orange; + } + + &.syntax--other.syntax--color { + color: @magenta; + } + + &.syntax--other.syntax--symbol { + color: @turquoise-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: @turquoise-green; + + + &.syntax--regexp { + color: @magenta; + + .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: @cyan; + } + + &.syntax--bold { + color: @yellow; + font-weight: bold; + } + + &.syntax--italic { + color: @purple; + font-style: italic; + } + } + + &.syntax--section.syntax--embedded { + color: darken(@red, 10%); + } + +} + +.syntax--support { + &.syntax--class { + color: @yellow; + } + + &.syntax--function { + color: @magenta; + + &.syntax--any-method { + color: @cyan; + } + } +} + +.syntax--entity { + &.syntax--name.syntax--function { + color: @cyan; + } + &.syntax--name.syntax--type { + color: @yellow; + text-decoration: underline; + } + + &.syntax--other.syntax--inherited-class { + color: @turquoise-green; + } + &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class { + color: @yellow; + } + + &.syntax--name.syntax--section { + color: @cyan; + } + + &.syntax--name.syntax--tag { + color: @red; + text-decoration: underline; + } + + &.syntax--other.syntax--attribute-name { + color: @orange; + + &.syntax--id { + color: @cyan; + } + } +} + +.syntax--meta { + &.syntax--class { + color: @yellow; + } + + &.syntax--link { + color: @orange; + } + + &.syntax--require { + color: @cyan; + } + + &.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: @cyan; + } + + &.syntax--inserted { + color: @turquoise-green; + } + + &.syntax--list { + color: @red; + } + + &.syntax--quote { + color: @orange; + } + + &.syntax--raw.syntax--inline { + color: @turquoise-green; + } +} + +.syntax--source.syntax--gfm .syntax--markup { + -webkit-font-smoothing: auto; + &.syntax--heading { + color: @turquoise-green; + } +} + + +// Mini editor + +atom-text-editor[mini] .scroll-view { + padding-left: 1px; +} diff --git a/styles/colors.less b/styles/colors.less new file mode 100644 index 0000000..e5e61d5 --- /dev/null +++ b/styles/colors.less @@ -0,0 +1,37 @@ +// These colors are specific to the theme. Do not use in a package! + +@very-light-gray: #c5c8c6; +@light-gray: #6B7076; +@gray: #373b41; +@dark-gray: #282a2e; +@very-dark-gray: #1d1f21; + +@purple: #b294bb; +@orange: #de935f; +@light-orange: #f0c674; + +// + +@very-dark-blue: #181B27; +@even-daker-blue: #13161F; + +@turquoise-green: #9ED0BD; +@actual-yellow: #FFE221; + +@black: #111C2A; +@red: #F82939; +@green: #3BEB2A; +@yellow: #FF8F19; +@blue: #2D4562; +@magenta: #6F4EBC; +@cyan: #65B4E6; +@grey: #838C95; + +@bright-black: #454640; +@bright-red: #FF0C1C; +@bright-green: #1EEB0B; +@bright-yellow: #FF9C32; +@bright-blue: #194A7F; +@bright-magenta: #5934B3; +@bright-cyan: #63CCE3; +@bright-grey: #8D8F9B; diff --git a/styles/syntax-variables.less b/styles/syntax-variables.less new file mode 100644 index 0000000..65dd5d0 --- /dev/null +++ b/styles/syntax-variables.less @@ -0,0 +1,31 @@ +@import "colors"; + +// This defines all syntax variables that syntax themes must implement when they +// include a syntax-variables.less file. + +// General colors +@syntax-text-color: @very-light-gray; +@syntax-cursor-color: white; +@syntax-selection-color: lighten(@dark-gray, 10%); +@syntax-background-color: @very-dark-blue; + +// Guide colors +@syntax-wrap-guide-color: @dark-gray; +@syntax-indent-guide-color: @gray; +@syntax-invisible-character-color: @gray; + +// For find and replace markers +@syntax-result-marker-color: @light-gray; +@syntax-result-marker-color-selected: @actual-yellow; + +// Gutter colors +@syntax-gutter-text-color: @very-light-gray; +@syntax-gutter-text-color-selected: @even-daker-blue; +@syntax-gutter-background-color: @even-daker-blue; +@syntax-gutter-background-color-selected: @light-gray; + +// For git diff info. i.e. in the gutter +@syntax-color-renamed: @blue; +@syntax-color-added: @green; +@syntax-color-modified: @orange; +@syntax-color-removed: @red;