// cosmic_latte_dark atom syntax theme // based on the One Dark Syntax theme // https://github.com/atom/atom/tree/master/packages/one-dark-syntax // Config ----------------------------------- @syntax-hue: 205; @syntax-saturation: 21%; @syntax-brightness: 16%; // Monochrome ----------------------------------- @mono-1: #abb0c0; // default text @mono-2: #898f9e; @mono-3: #898f9e; // Colors ----------------------------------- @hue-1: #459d90; // <-cyan @hue-2: #5496bd; // <-blue @hue-3: #9b85bb; // <-purple @hue-4: #7d9761; // <-green @hue-5: #c17b8d; // <-red 1 @hue-5-2: #c17b8d; // <-red 2 @hue-6: #b28761; // <-orange 1 @hue-6-2: #b28761; // <-orange 2 // Base colors ----------------------------------- @syntax-fg: @mono-1; @syntax-bg: hsl(@syntax-hue, @syntax-saturation, @syntax-brightness); @syntax-gutter: #63757e; @syntax-guide: fade(@syntax-fg, 15%); @syntax-accent: hsl(@syntax-hue, 100%, 66% ); // Official Syntax Variables ----------------------------------- // General colors @syntax-text-color: @syntax-fg; @syntax-cursor-color: #c5cbdb; @syntax-selection-color: #2b3740; @syntax-selection-flash-color: @syntax-accent; @syntax-background-color: @syntax-bg; // Guide colors @syntax-wrap-guide-color: @syntax-guide; @syntax-indent-guide-color: @syntax-guide; @syntax-invisible-character-color: @syntax-guide; // For find and replace markers @syntax-result-marker-color: fade(@syntax-accent, 24%); @syntax-result-marker-color-selected: @syntax-accent; // Gutter colors @syntax-gutter-text-color: @syntax-gutter; @syntax-gutter-text-color-selected: @syntax-fg; @syntax-gutter-background-color: @syntax-bg; // unused @syntax-gutter-background-color-selected: #2b3740; // Git colors - For git diff info. i.e. in the gutter @syntax-color-renamed: hsl(208, 100%, 60%); @syntax-color-added: hsl(150, 60%, 54%); @syntax-color-modified: hsl(40, 60%, 70%); @syntax-color-removed: hsl(0, 70%, 60%); // For language entity colors @syntax-color-variable: @hue-5; @syntax-color-constant: @hue-6; @syntax-color-property: @syntax-fg; @syntax-color-value: @syntax-fg; @syntax-color-function: @hue-2; @syntax-color-method: @hue-2; @syntax-color-class: @hue-6-2; @syntax-color-keyword: @hue-3; @syntax-color-tag: @hue-5; @syntax-color-attribute: @hue-6; @syntax-color-import: @hue-3; @syntax-color-snippet: @hue-4; // Custom Syntax Variables ----------------------------------- // Don't use in packages @syntax-cursor-line: hsla(@syntax-hue, 100%, 80%, .04); // needs to be semi-transparent to show search results @syntax-deprecated-fg: darken(@syntax-color-modified, 50%); @syntax-deprecated-bg: @syntax-color-modified; @syntax-illegal-fg: white; @syntax-illegal-bg: @syntax-color-removed; // Editor styles (background, gutter, guides) atom-text-editor { background-color: @syntax-background-color; color: @syntax-text-color; .line.cursor-line { background-color: @syntax-cursor-line; } .invisible { color: @syntax-text-color; } .cursor { border-left: 2px solid @syntax-cursor-color; } .selection .region { background-color: @syntax-selection-color; } .bracket-matcher .region { border-bottom: 1px solid @syntax-cursor-color; box-sizing: border-box; } .invisible-character { color: @syntax-invisible-character-color; } .indent-guide { color: @syntax-indent-guide-color; } .wrap-guide { background-color: @syntax-wrap-guide-color; } // find + replace .find-result .region.region.region, .current-result .region.region.region { border-radius: 2px; background-color: @syntax-result-marker-color; transition: border-color .4s; } .find-result .region.region.region { border: 2px solid transparent; } .current-result .region.region.region { border: 2px solid @syntax-result-marker-color-selected; transition-duration: .1s; } .gutter { .line-number { color: @syntax-gutter-text-color; -webkit-font-smoothing: antialiased; &.cursor-line { color: @syntax-gutter-text-color-selected; background-color: @syntax-gutter-background-color-selected; } &.cursor-line-no-selection { background-color: transparent; } .icon-right { color: @syntax-text-color; } } &:not(.git-diff-icon) .line-number.git-line-removed { &.git-line-removed::before { bottom: -3px; } &::after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 25px; border-bottom: 1px dotted fade(@syntax-color-removed, 50%); pointer-events: none; } } } .gutter .line-number.folded, .gutter .line-number:after, .fold-marker:after { color: @syntax-gutter-text-color-selected; } } // Language syntax highlighting .syntax--comment { color: @mono-3; font-style: italic; .syntax--markup.syntax--link { color: @mono-3; } } .syntax--entity { &.syntax--name.syntax--type { color: @hue-6-2; } &.syntax--other.syntax--inherited-class { color: @hue-4; } } .syntax--keyword { color: @hue-3; &.syntax--control { color: @hue-3; } &.syntax--operator { color: @mono-1; } &.syntax--other.syntax--special-method { color: @hue-2; } &.syntax--other.syntax--unit { color: @hue-6; } } .syntax--storage { color: @hue-3; &.syntax--type { &.syntax--annotation, &.syntax--primitive { color: @hue-3; } } &.syntax--modifier { &.syntax--package, &.syntax--import { color: @mono-1; } } } .syntax--constant { color: @hue-6; &.syntax--variable { color: @hue-6; } &.syntax--character.syntax--escape { color: @hue-1; } &.syntax--numeric { color: @hue-6; } &.syntax--other.syntax--color { color: @hue-1; } &.syntax--other.syntax--symbol { color: @hue-1; } } .syntax--variable { color: @hue-5; &.syntax--interpolation { color: @hue-5-2; } &.syntax--parameter { color: @mono-1; } } .syntax--string { color: @hue-4; > .syntax--source, .syntax--embedded { color: @mono-1; } &.syntax--regexp { color: @hue-1; .syntax--source.syntax--ruby.syntax--embedded { color: @hue-6-2; } } &.syntax--other.syntax--link { color: @hue-5; } } .syntax--punctuation { &.syntax--definition { &.syntax--comment { color: @mono-3; } &.syntax--method-parameters, &.syntax--function-parameters, &.syntax--parameters, &.syntax--separator, &.syntax--seperator, &.syntax--array { color: @mono-1; } &.syntax--heading, &.syntax--identity { color: @hue-2; } &.syntax--bold { color: @hue-6-2; font-weight: bold; } &.syntax--italic { color: @hue-3; font-style: italic; } } &.syntax--section { &.syntax--embedded { color: @hue-5-2; } &.syntax--method, &.syntax--class, &.syntax--inner-class { color: @mono-1; } } } .syntax--support { &.syntax--class { color: @hue-6-2; } &.syntax--type { color: @hue-1; } &.syntax--function { color: @hue-1; &.syntax--any-method { color: @hue-2; } } } .syntax--entity { &.syntax--name.syntax--function { color: @hue-2; } &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class { color: @hue-6-2; } &.syntax--name.syntax--section { color: @hue-2; } &.syntax--name.syntax--tag { color: @hue-5; } &.syntax--other.syntax--attribute-name { color: @hue-6; &.syntax--id { color: @hue-2; } } } .syntax--meta { &.syntax--class { color: @hue-6-2; &.syntax--body { color: @mono-1; } } &.syntax--method-call, &.syntax--method { color: @mono-1; } &.syntax--definition { &.syntax--variable { color: @hue-5; } } &.syntax--link { color: @hue-6; } &.syntax--require { color: @hue-2; } &.syntax--selector { color: @hue-3; } &.syntax--separator { color: @mono-1; } &.syntax--tag { color: @mono-1; } } .syntax--underline { text-decoration: underline; } .syntax--none { color: @mono-1; } .syntax--invalid { &.syntax--deprecated { color: @syntax-deprecated-fg !important; background-color: @syntax-deprecated-bg !important; } &.syntax--illegal { color: @syntax-illegal-fg !important; background-color: @syntax-illegal-bg !important; } } // Languages ------------------------------------------------- .syntax--markup { &.syntax--bold { color: @hue-6; font-weight: bold; } &.syntax--changed { color: @hue-3; } &.syntax--deleted { color: @hue-5; } &.syntax--italic { color: @hue-3; font-style: italic; } &.syntax--heading { color: @hue-5; .syntax--punctuation.syntax--definition.syntax--heading { color: @hue-2; } } &.syntax--link { color: @hue-1; } &.syntax--inserted { color: @hue-4; } &.syntax--quote { color: @hue-6; } &.syntax--raw { color: @hue-4; } } .syntax--source.syntax--c { .syntax--keyword.syntax--operator { color: @hue-3; } } .syntax--source.syntax--cpp { .syntax--keyword.syntax--operator { color: @hue-3; } } .syntax--source.syntax--cs { .syntax--keyword.syntax--operator { color: @hue-3; } } .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; } } } .syntax--source.syntax--elixir { .syntax--source.syntax--embedded.syntax--source { color: @mono-1; } .syntax--constant.syntax--language, .syntax--constant.syntax--numeric, .syntax--constant.syntax--definition { color: @hue-2; } .syntax--variable.syntax--definition, .syntax--variable.syntax--anonymous{ color: @hue-3; } .syntax--parameter.syntax--variable.syntax--function { color: @hue-6; font-style: italic; } .syntax--quoted{ color: @hue-4; } .syntax--keyword.syntax--special-method, .syntax--embedded.syntax--section, .syntax--embedded.syntax--source.syntax--empty, { color: @hue-5; } .syntax--readwrite.syntax--module { .syntax--punctuation { color: @hue-5; } } .syntax--regexp.syntax--section, .syntax--regexp.syntax--string { color: @hue-5-2; } .syntax--separator, .syntax--keyword.syntax--operator { color: @hue-6; } .syntax--variable.syntax--constant { color: @hue-6-2; } .syntax--array, .syntax--scope, .syntax--section { color: @mono-2; } } .syntax--source.syntax--gfm { .syntax--markup { -webkit-font-smoothing: auto; } .syntax--link .syntax--entity { color: @hue-2; } } .syntax--source.syntax--go { .syntax--storage.syntax--type.syntax--string { color: @hue-3; } } .syntax--source.syntax--ini { .syntax--keyword.syntax--other.syntax--definition.syntax--ini { color: @hue-5; } } .syntax--source.syntax--java { .syntax--storage { &.syntax--modifier.syntax--import { color: @hue-6-2; } &.syntax--type { color: @hue-6-2; } } .syntax--keyword.syntax--operator.syntax--instanceof { color: @hue-3; } } .syntax--source.syntax--java-properties { .syntax--meta.syntax--key-pair { color: @hue-5; & > .syntax--punctuation { color: @mono-1; } } } .syntax--source.syntax--js { .syntax--keyword.syntax--operator { color: @hue-1; // keywords are definded in https://github.com/atom/language-javascript/blob/master/grammars/javascript.cson // search "instanceof" for location &.syntax--delete, &.syntax--in, &.syntax--of, &.syntax--instanceof, &.syntax--new, &.syntax--typeof, &.syntax--void { color: @hue-3; } } } .syntax--source.syntax--json { .syntax--meta.syntax--structure.syntax--dictionary.syntax--json { & > .syntax--string.syntax--quoted.syntax--json { & > .syntax--punctuation.syntax--string { color: @hue-5; } color: @hue-5; } } .syntax--meta.syntax--structure.syntax--dictionary.syntax--json, .syntax--meta.syntax--structure.syntax--array.syntax--json { & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json, & > .syntax--value.syntax--json > .syntax--string.syntax--quoted.syntax--json > .syntax--punctuation { color: @hue-4; } & > .syntax--constant.syntax--language.syntax--json { color: @hue-1; } } } .syntax--ng { &.syntax--interpolation { color: @hue-5; &.syntax--begin, &.syntax--end { color: @hue-2; } .syntax--function { color: @hue-5; &.syntax--begin, &.syntax--end { color: @hue-2; } } .syntax--bool { color: @hue-6; } .syntax--bracket { color: @mono-1; } } &.syntax--pipe, &.syntax--operator { color: @mono-1; } &.syntax--tag { color: @hue-1; } &.syntax--attribute-with-value { .syntax--attribute-name { color: @hue-6-2; } .syntax--string { color: @hue-3; &.syntax--begin, &.syntax--end { color: @mono-1; } } } } .syntax--source.syntax--php { .syntax--class.syntax--bracket { color: @mono-1; } } .syntax--source.syntax--python { .syntax--keyword.syntax--operator.syntax--logical.syntax--python { color: @hue-3; } .syntax--variable.syntax--parameter { color: @hue-6; } } .syntax--source.syntax--ruby { .syntax--constant.syntax--other.syntax--symbol > .syntax--punctuation { color: inherit; } } .syntax--source.syntax--ts { .syntax--keyword.syntax--operator { color: @hue-1; } } .syntax--source.syntax--flow { .syntax--keyword.syntax--operator { color: @hue-1; } }