diff --git a/examples/sample.html b/examples/sample.html new file mode 100644 index 0000000..d2e0625 --- /dev/null +++ b/examples/sample.html @@ -0,0 +1,12 @@ + + + + + + + +
+ Sample +
+ + diff --git a/examples/sample.js b/examples/sample.js new file mode 100644 index 0000000..5fed008 --- /dev/null +++ b/examples/sample.js @@ -0,0 +1,29 @@ +/* + * Once upon a time... + */ + +class Vampire { + constructor(props) { + this.location = props.location; + this.birthDate = props.birthDate; + this.deathDate = props.deathDate; + this.weaknesses = props.weaknesses; + } + + get age() { + return this.calcAge(); + } + + calcAge() { + return this.deathDate - this.birthDate; + } +} + +// ...there was a guy named Vlad + +const Dracula = new Vampire({ + location: 'Transylvania', + birthDate: 1428, + deathDate: 1476, + weaknesses: ['Sunlight', 'Garlic'] +}); diff --git a/examples/sample.json b/examples/sample.json new file mode 100644 index 0000000..b024795 --- /dev/null +++ b/examples/sample.json @@ -0,0 +1,29 @@ +{ + "singleValues": { + "number": 0, + "string": "test", + "boolean": true, + }, + "multipleValues": { + "array": [1 ,2 ,3, 4, 5], + "stringArray": ["string", "string", "string"], + "booleanArray": [true, false, true, true, false], + "objectArray": [ + { + "number": 0, + "string": "test", + "boolean": true, + }, + { + "number": 0, + "string": "test", + "boolean": true, + }, + { + "number": 0, + "string": "test", + "boolean": true, + } + ] + } +} diff --git a/index.less b/index.less index cdd4ae1..b96edf6 100644 --- a/index.less +++ b/index.less @@ -2,7 +2,7 @@ * * https://github.com/dracula/atom * - * Copyright 2014-present, All rights reserved + * Copyright 2014 - present, All rights reserved * * Code licensed under the MIT license * https://github.com/dracula/atom/blob/master/LICENSE diff --git a/screenshot.png b/screenshot.png index 71ea3fc..828cacc 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/styles/base.less b/styles/base.less index ba3913e..8c8baeb 100644 --- a/styles/base.less +++ b/styles/base.less @@ -1,307 +1,417 @@ @import "syntax-variables"; -atom-text-editor, atom-text-editor .gutter { - background-color: @very-dark-gray; - color: @very-light-gray; -} +atom-text-editor { + background-color: @syntax-background-color; + color: @syntax-text-color; -atom-text-editor.is-focused .cursor { - border-color: @lace; -} + .wrap-guide { + background-color: @syntax-wrap-guide-color; + } -atom-text-editor.is-focused .selection .region { - background-color: @dark-gray; -} + .indent-guide { + color: @syntax-indent-guide-color; + } -atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line { - background-color: @dark-gray; -} + .invisible-character { + color: @syntax-invisible-character-color; + } -atom-text-editor .invisible-character { - color: @gray; -} + .gutter { + background-color: @syntax-gutter-background-color; + color: @syntax-gutter-text-color; -atom-text-editor .indent-guide { - box-shadow: inset 1px 0 darken(@gray, 13%); -} + .line-number { + &.cursor-line { + background-color: @syntax-gutter-background-color-selected; + color: @syntax-gutter-text-color-selected; + } -atom-text-editor .gutter .line-number.git-line-modified, -atom-text-editor .gutter .line-number.git-line-removed, -atom-text-editor .gutter .line-number.git-line-added { - border-left-width: 5px; - padding-left: calc(0.5em - 5px); -} + &.cursor-line-no-selection { + color: @syntax-gutter-text-color-selected; + } + } + } -.markdown-preview > atom-text-editor { - background: @very-dark-gray; - border: 1px solid @very-dark-gray; -} + .gutter .line-number.folded, + .gutter .line-number:after, + .fold-marker:after { + color: @light-gray; + } -.markdown-preview atom-text-editor { - color: @black; -} + .invisible { + color: @syntax-text-color; + } -.wrap-guide { - background-color: @blue; -} + .cursor { + color: @syntax-cursor-color; + } -.syntax--comment { - color: @blue; + .selection .region { + background-color: @syntax-selection-color; + } } -.syntax--string { - color: @yellow; -} -.syntax--constant.syntax--numeric { - color: @purple; -} +// Syntax styles -.syntax--constant.syntax--language { - color: @purple; -} - -.syntax--constant.syntax--character, .syntax--constant.syntax--other { - color: @purple; -} +.syntax--comment { + color: @comment; -.syntax--variable { - color: @cyan; -} + .syntax--keyword.syntax--control { + color: @pink; + } -.syntax--variable.syntax--other.syntax--readwrite.syntax--instance { - color: @orange; -} + .syntax--support.syntax--type { + color: @cyan; + font-style: italic; + } -.syntax--constant.syntax--character.syntax--escaped, .syntax--constant.syntax--character.syntax--escape, .syntax--string .syntax--source, .syntax--string .syntax--source.syntax--ruby { - color: @pink; + .syntax--variable { + color: @orange; + font-style: italic; + } } .syntax--keyword { color: @pink; -} -.syntax--storage { - color: @pink; -} + &.syntax--control { + color: @pink; + } -.syntax--storage.syntax--type { - font-style: italic; - color: @cyan; -} + &.syntax--operator { + color: @pink; + } -.syntax--entity.syntax--name.syntax--class { - text-decoration: underline; - color: @green; -} + &.syntax--setter { + color: @cyan; + font-style: italic; + } -.syntax--entity.syntax--other.syntax--inherited-class { - font-style: italic; - text-decoration: underline; - color: @green; -} + &.syntax--other.syntax--special-method { + color: @blue; + } -.syntax--entity.syntax--name.syntax--function { - color: @green; + &.syntax--other.syntax--unit { + color: @orange; + } } -.syntax--variable.syntax--parameter { - font-style: italic; - color: @orange; -} - -.syntax--entity.syntax--name.syntax--tag { +.syntax--storage { color: @pink; -} -.syntax--entity.syntax--other.syntax--attribute-name { - color: @green; + // &.syntax--type { + // color: @cyan; + // font-style: italic; + // } } -.syntax--support.syntax--function { - color: @cyan; -} - -.syntax--support.syntax--constant { - color: darken(@cyan, 6%); -} - -.syntax--support.syntax--type, .syntax--support.syntax--class { - font-style: italic; - color: @soft-cyan; -} +.syntax--constant { + color: @purple; -.syntax--support.syntax--other.syntax--variable { -} + &.syntax--character.syntax--escape { + color: @pink; + } -.syntax--invalid { - color: @lace; - background-color: @pink; -} + &.syntax--numeric { + color: @purple; + } -.syntax--invalid.syntax--deprecated { - color: @lace; - background-color: @purple; -} + &.syntax--other.syntax--color { + color: @cyan; + } -.syntax--meta.syntax--structure.syntax--dictionary.syntax--json .syntax--string.syntax--quoted.syntax--double.syntax--json { - color: @sandstone; + &.syntax--other.syntax--symbol { + color: @green; + } } -.syntax--meta.syntax--diff, .syntax--meta.syntax--diff.syntax--header { - color: @blue; -} +.syntax--variable { + color: @foreground; -.syntax--markup.syntax--deleted { - color: @pink; -} + &.syntax--interpolation { + color: @pink; + } -.syntax--markup.syntax--inserted { - color: @green; -} + &.syntax--parameter.syntax--function { + color: @orange; + font-style: italic; + } -.syntax--markup.syntax--changed { - color: @dark-yellow; + &.syntax--list { + color: @cyan; + } } -.syntax--constant.syntax--numeric.line-number.syntax--find-in-files:not(.match) { - color: @purple; +.syntax--invalid.syntax--illegal { + background-color: @red; + color: @syntax-background-color; } -.syntax--entity.syntax--name.syntax--filename { - color: @dark-yellow; +// StringRegExp +.syntax--regexp { + .syntax--keyword.syntax--operator, + .syntax--storage.syntax--modifier { + color: @red; + } } -.syntax--message.syntax--error { - color: #F83333; -} +// String +.syntax--string { + color: @yellow; -.syntax--punctuation.syntax--definition.syntax--string.syntax--begin.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json), .syntax--punctuation.syntax--definition.syntax--string.syntax--end.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json) { - color: darken(@white, 7%); -} + &.syntax--regexp { + color: @red; -.syntax--meta.syntax--structure.syntax--dictionary.syntax--json .syntax--string.syntax--quoted.syntax--double.syntax--json { - color: @cyan; -} + .syntax--source.syntax--ruby.syntax--embedded { + color: @orange; + } + } -.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json .syntax--string.syntax--quoted.syntax--double.syntax--json { - color: @yellow; + &.syntax--other.syntax--link { + color: @red; + } } -.syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @green; -} +.syntax--punctuation { + &.syntax--definition { + &.syntax--bracket, + &.syntax--curly { + color: @foreground; + } -.syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @orange; -} + &.syntax--comment { + color: @comment; + } -.syntax--meta .syntax--meta .syntax--meta .syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @pink; -} + &.syntax--string, + &.syntax--variable, + &.syntax--parameters, + &.syntax--array { + color: @syntax-text-color; + } -.syntax--meta .syntax--meta .syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @purple; -} + &.syntax--heading, + &.syntax--identity { + color: @blue; + } -.syntax--meta .syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @green; -} + &.syntax--bold { + color: @orange; + font-weight: bold; + } -.syntax--meta .syntax--meta.syntax--structure.syntax--dictionary.syntax--value .syntax--string { - color: @orange; -} + &.syntax--italic { + color: @purple; + font-style: italic; + } + } -.syntax--heading.syntax--gfm { - color: @purple; -} + &.syntax--section.syntax--embedded { + color: darken(@red, 10%); + } -.syntax--entity.syntax--gfm { - color: @pink; } -.syntax--markup.syntax--underline.syntax--link.syntax--gfm { +.syntax--support { color: @cyan; -} + font-style: italic; + width: calc(1px); -.syntax--variable.syntax--unordered.syntax--list.syntax--gfm { - color: @cyan; -} + &.syntax--class { + color: @cyan; + } -.syntax--variable.syntax--ordered.syntax--list.syntax--gfm { - color: @cyan; -} + &.syntax--constant { + color: @purple; + } -.syntax--variable.syntax--other.syntax--normal.syntax--shell { - color:@purple; -} + &.syntax--function { + color: @cyan; -.syntax--markup.syntax--bold.syntax--gfm { - color: @orange; -} + &.syntax--any-method { + color: @cyan; + } + } -.syntax--markup.syntax--italic.syntax--gfm { - color: @yellow; + // MarkupBlockquote + &.syntax--quote&.syntax--gfm { + color: @yellow; + font-style: italic; + } } -.syntax--markup.syntax--strike.syntax--gfm { - color: @red; -} +.syntax--entity { + color: @pink; -.syntax--markup.syntax--raw.syntax--gfm { - color: @green; -} + &.syntax--name.syntax--function { + color: @green; + } -.syntax--code.syntax--gfm { - color: @green; -} + &.syntax--name.syntax--type { + color: @orange; + font-style: italic; + } -.syntax--code.syntax--gfm .syntax--link { + &.syntax--other.syntax--inherited-class { color: @cyan; -} + font-style: italic; + } -.syntax--critic.syntax--gfm.syntax--addition { - color: @green; -} + &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class { + color: @cyan; + } -.syntax--critic.syntax--gfm.syntax--deletion { - color: @red; -} + &.syntax--name.syntax--section { + color: @blue; + } -.syntax--critic.syntax--gfm.syntax--substitution { - color: @orange; -} + &.syntax--name.syntax--tag { + color: @pink; + } -.syntax--critic.syntax--gfm.syntax--highlight { - color: @pink; -} + &.syntax--other.syntax--attribute-name { + color: @green; -.syntax--critic.syntax--gfm.syntax--comment { - color: @blue; + &.syntax--id { + color: @blue; + } + } } -[data-zen="true"] atom-pane-container atom-pane .item-views { - background: @very-dark-gray !important; -} +.syntax--meta { + &.syntax--class { + color: @cyan; + } -atom-text-editor .highlight.find-result .region { - background: lighten(@dark-gray, 3%); - z-index: -1000; -} + &.syntax--link { + color: @orange; + } -atom-text-editor .highlight.current-result .region, -atom-text-editor .highlight.current-result ~ .highlight.selection .region { - background: lighten(@dark-gray, 20%); // to distinguish from the other results - z-index: -1000; -} + &.syntax--require { + color: @blue; + } -atom-text-editor .bracket-matcher .region { - border-bottom: 1px dotted @green; - z-index: 100; + &.syntax--selector { + color: @purple; + } + + &.syntax--delimiter { + color: @pink; + + &.syntax--comma { + color: @syntax-text-color; + } + } + + &.syntax--separator { + // background-color: @gray; + color: @pink; + } +} + +.syntax--none { + color: @syntax-text-color; } -// Highlights #{} in ruby string interpolation and syntax tag -.syntax--punctuation.syntax--section.syntax--embedded.syntax--begin, -.syntax--punctuation.syntax--section.syntax--embedded.syntax--end { - color: @orange; +.syntax--markup { + &.syntax--bold { + color: @orange; + font-weight: bold; + } + + &.syntax--changed { + color: @purple; + } + + &.syntax--deleted { + color: @red; + } + + &.syntax--italic { + color: @yellow; + 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; + } +} + +// Markdown/RST +.syntax--source.syntax--gfm { + .syntax--markup { + -webkit-font-smoothing: auto; + + &.syntax--heading { + color: @purple; + font-weight: bold; + } + + &.syntax--link { + &.syntax--underline { + color: @cyan; + } + } + + &.syntax--raw { + color: @green; + } + } + + .syntax--link { + .syntax--punctuation { + color: @orange; + } + } + + .syntax--raw.syntax--inline { + color: @green; + } + + &.syntax--quote, + .syntax--comment.syntax--quote { + color: @yellow; + font-style: italic; + } + + // MarkupCodeBlockWithoutSyntax + .syntax--raw { + .syntax--support.syntax--gfm { + color: @orange; + } + } + + // MarkupCodeBlockWithSyntax + .syntax--code { + .syntax--support.syntax--gfm { + color: @green; + } + + .syntax--embedded { + color: @green; + } + } +} + +// Mini editor + +atom-text-editor[mini] .scroll-view { + padding-left: 1px; } diff --git a/styles/colors.less b/styles/colors.less index 2bdfb62..bc4076f 100644 --- a/styles/colors.less +++ b/styles/colors.less @@ -1,21 +1,35 @@ -@very-dark-gray: #282a36; // Background -@dark-gray: hsla(220, 100%, 80%, .08); // Current Line & Selection -@gray: #666666; -@light-gray: #999999; -@very-light-gray: #f8f8f2; // Foreground -@blue: #6272a4; // Comment +// These colors are specific to the theme. Do not use in a package! -@cyan: #8be9fd; -@soft-cyan: #66d9ef; -@green: #50fa7b; -@orange: #ffb86c; -@pink: #ff79c6; -@purple: #bd93f9; -@red: #ff5555; -@yellow: #f1fa8c; -@dark-yellow: #E6DB74; -@sandstone: #cfcfc2; +// dracula colors +@background: #282A36; +@foreground: #F8F8F2; +@selection: #44475A; +@comment: #6272A4; +@red: #FF5555; +@orange: #FFB86C; +@yellow: #F1FA8C; +@green: #50FA7B; +@purple: #BD93F9; +@cyan: #8BE9FD; +@pink: #FF79C6; +// not dracula colors @lace: #f8f8f0; @white: #ffffff; @black: #000000; +@blue: @comment; + +// default syntax set colors +@very-dark-gray: @background; +@dark-gray: hsla(220, 100%, 80%, .08); // Current Line & Selection +@gray: #666666; +@light-gray: #999999; +@very-light-gray: @foreground; // Foreground + +// @cyan: #8abeb7; +// @blue: #81a2be; +// @purple: #b294bb; +// @green: #b5bd68; +// @red: #cc6666; +// @orange: #de935f; +// @light-orange: #f0c674; diff --git a/styles/syntax-variables.less b/styles/syntax-variables.less index dd89b1a..3fa8cda 100644 --- a/styles/syntax-variables.less +++ b/styles/syntax-variables.less @@ -5,9 +5,8 @@ // General colors @syntax-text-color: @very-light-gray; -@syntax-cursor-color: @white; +@syntax-cursor-color: white; @syntax-selection-color: lighten(@dark-gray, 10%); -@syntax-selection-flash-color: @very-light-gray; @syntax-background-color: @very-dark-gray; // Guide colors @@ -17,7 +16,7 @@ // For find and replace markers @syntax-result-marker-color: @light-gray; -@syntax-result-marker-color-selected: @white; +@syntax-result-marker-color-selected: white; // Gutter colors @syntax-gutter-text-color: @very-light-gray; @@ -30,17 +29,3 @@ @syntax-color-added: @green; @syntax-color-modified: @orange; @syntax-color-removed: @red; - -// For language entity colors -@syntax-color-variable: @red; -@syntax-color-constant: @yellow; -@syntax-color-property: @very-light-gray; -@syntax-color-value: @very-light-gray; -@syntax-color-function: @blue; -@syntax-color-method: @blue; -@syntax-color-class: @dark-yellow; -@syntax-color-keyword: @purple; -@syntax-color-tag: @red; -@syntax-color-attribute: @yellow; -@syntax-color-import: @purple; -@syntax-color-snippet: @green;