├── index.less ├── CHANGELOG.md ├── package.json ├── styles ├── syntax-variables.less ├── colors.less └── base.less ├── LICENSE.md └── README.md /index.less: -------------------------------------------------------------------------------- 1 | @import "./styles/base.less"; 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | Release notes can be found at https://github.com/tjkohli/nebula-syntax/releases -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nebula-syntax", 3 | "author": "TJ Kohli ", 4 | "theme": "syntax", 5 | "version": "0.4.5", 6 | "description": "A beautifully minimal, subtly animated, and carefully designed Atom syntax theme that lets you focus on what matters: your code. For best results, use with the nebula-ui theme.", 7 | "keywords": [ 8 | "atom", 9 | "ui", 10 | "theme", 11 | "nebula", 12 | "minimal", 13 | "focus", 14 | "distraction free" 15 | ], 16 | "repository": "https://github.com/tjkohli/nebula-syntax", 17 | "license": "MIT", 18 | "engines": { 19 | "atom": ">=1.0.0 <2.0.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | // This defines all syntax variables that syntax themes must implement when they 4 | // include a syntax-variables.less file. 5 | 6 | // General colors 7 | @syntax-text-color: @very-light-gray; 8 | @syntax-cursor-color: white; 9 | @syntax-selection-color: @gray; 10 | @syntax-background-color: @dark-gray; 11 | 12 | // Guide colors 13 | @syntax-wrap-guide-color: @gray; 14 | @syntax-indent-guide-color: fade(@light-gray, 20%); 15 | @syntax-invisible-character-color: @gray; 16 | 17 | // For find and replace markers 18 | @syntax-result-marker-color: @light-gray; 19 | @syntax-result-marker-color-selected: white; 20 | 21 | // Gutter colors 22 | @syntax-gutter-text-color: @light-gray; 23 | @syntax-gutter-text-color-selected: @very-light-gray; 24 | @syntax-gutter-background-color: transparent; 25 | @syntax-gutter-background-color-selected: fade(@gray, 20%); 26 | 27 | // For git diff info. i.e. in the gutter 28 | @syntax-color-renamed: @blue; 29 | @syntax-color-added: desaturate(@green, 10%); 30 | @syntax-color-modified: @orange; 31 | @syntax-color-removed: @red; -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 TJ Kohli (tjkohli.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / COLORS 2 | // An Atom theme that's out of this world. 3 | // 4 | // Copyright (c) 2017 TJ Kohli / tjkohli.com 5 | // ----------------------------------------- 6 | 7 | // NEUTRALS / Background & text colors 8 | // ----------------------------------- 9 | 10 | // active text 11 | @very-light-gray: lighten(desaturate(@dark-gray, 10%), 75%); 12 | 13 | // main text 14 | @light-gray: lighten(desaturate(@dark-gray, 10%), 30%); 15 | 16 | // disabled text 17 | @subtle-gray: lighten(desaturate(@dark-gray, 10%), 15%); 18 | 19 | // medium gray 20 | @gray: lighten(@dark-gray, 7%); 21 | 22 | // base gray 23 | @dark-gray: hsl(218,19%,14%); 24 | 25 | // dark base 26 | @very-dark-gray: darken(@dark-gray, 2%); 27 | 28 | 29 | // BRIGHTS / Accent & code colors 30 | // ------------------------------ 31 | 32 | @red: #F04180; 33 | @orange: #F5CD73; 34 | @light-orange: lighten(@orange, 10%); 35 | @green: #AAED37; 36 | @cyan: #23DEC5; 37 | @blue: #7AC3FF; 38 | @purple: #B57EED; 39 | 40 | // copied from UI theme, for redundancy 41 | @background-color-info: @blue; 42 | @background-color-success: darken(@green, 22%); 43 | @background-color-warning: darken(@orange, 22%); 44 | @background-color-error: hsl(346,100%,50%); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | Nebula logo 5 |

6 | 7 | 8 | 9 |

Nebula Syntax

10 | 11 | 12 | 13 |

14 | 15 | GitHub Nebula UI Releases 16 | 17 | 18 | GitHub Nebula Syntax Releases 19 | 20 | 21 | Atom Nebula UI 22 | 23 | 24 | Atom Nebula Syntax 25 | 26 |

27 | 28 |

A minimal Atom theme that's out of this world.
Works best when paired with the nebula-ui theme

29 | 30 |

31 | Nebula theme screenshot 32 |

33 | 34 |
35 | 36 | 37 | 38 |
39 |

40 | Nebula colors 41 |

42 | 43 |

Meet the colors.

44 |

45 | Every great theme starts with great colors.
46 | Five are not enough. Seven are too many.
47 | A family of six, beautiful colors was chosen
48 | through a critical and structured process. 49 |

50 | 51 | 52 | 53 |

Have your eye candy. And see it, too.

54 |

55 | All six colors were painstakingly tested for ergonomics,
56 | legibility, and aesthetics on several monitor configurations,
57 | including sRGB, Adobe RGB, miscalibrated, grayscale, HDR,
58 | high-contrast, low-contrast, f.lux, and more. 59 |

60 | 61 |

Multichromatic. Monochromatic.

62 |

63 | All colors were tested together in a monochromatic
64 | environment to ensure their contrast levels match so
65 | no single color catches your eye more than the others do. 66 |

67 |
68 | 69 |
70 | 71 | 72 | 73 |

74 | Search 75 |

76 | 77 |

Get more done with Focus Mode.

78 |

79 | Modals fly above your code. Inputs come to life when focused.
80 | And with the all-new Focus Mode, elements gracefully fade into
the deep blue-gray background when you're not looking at them. 81 |

82 |
83 | 84 |
85 | 86 | 87 | 88 |

89 | Settings 90 |

91 | 92 |

A theme that's just your type.

93 |

94 | The human mind takes 13 milliseconds to recognize a letter.
95 | Multiply that by millions of letters every day, and properly-set type
96 | saves time, reduces eye strain, and can save you a few headaches.
97 | Nebula recommends SF Mono for code. It's fantastic. 98 |

99 |
100 | 101 |
102 | 103 |
104 | 105 |

The little things.

106 |

Additional features

107 |

Use the nebula-ui and nebula-syntax themes together and get all these awesome features. 108 |

127 |

128 | 129 |
130 | 131 |
132 |

133 | 134 | Made with <3 by TJ Kohli 135 | 136 |

137 | -------------------------------------------------------------------------------- /styles/base.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | atom-text-editor { 4 | background-color: @syntax-background-color; 5 | color: @syntax-text-color; 6 | 7 | .wrap-guide { 8 | background-color: @syntax-wrap-guide-color; 9 | } 10 | .indent-guide { 11 | color: @syntax-indent-guide-color; 12 | } 13 | 14 | .invisible-character { 15 | color: @syntax-invisible-character-color; 16 | } 17 | 18 | // column that displays line numbers 19 | 20 | .gutter { 21 | background-color: @syntax-gutter-background-color; 22 | color: @syntax-gutter-text-color; 23 | 24 | .line-number { 25 | cursor: pointer; 26 | transition: color 0.2s ease; 27 | 28 | &.cursor-line { 29 | background-color: @syntax-gutter-background-color-selected; 30 | color: @syntax-gutter-text-color-selected; 31 | } 32 | 33 | &.cursor-line-no-selection { 34 | color: @syntax-gutter-text-color-selected; 35 | } 36 | } 37 | } 38 | 39 | .fold-marker:after, 40 | .gutter .line-number.folded, 41 | .gutter .line-number:after { 42 | color: @light-gray; 43 | } 44 | 45 | .invisible { 46 | color: @syntax-text-color; 47 | } 48 | 49 | .cursor { 50 | color: @syntax-cursor-color; 51 | // rest of .cursor styles --> nebula-ui 52 | } 53 | 54 | .cursor-line { 55 | background: @syntax-gutter-background-color-selected; 56 | } 57 | 58 | .selection .region { 59 | background-color: @syntax-selection-color; 60 | } 61 | 62 | .search-results { 63 | .syntax--marker { 64 | .region { 65 | background-color: transparent; 66 | border: 1px solid @syntax-result-marker-color; 67 | } 68 | &.current-result { 69 | .region { 70 | border: 1px solid @syntax-result-marker-color-selected; 71 | } 72 | } 73 | } 74 | } 75 | } 76 | 77 | // Syntax styles 78 | .syntax--comment { 79 | color: lighten(@light-gray, 10%); 80 | transition: opacity 0.3s ease; 81 | } 82 | atom-workspace[theme-nebula-ui-focusmode=enabled] { 83 | .syntax--comment { 84 | opacity: 0.5; 85 | // transform: translate3d(0,0,0); 86 | &.syntax--whitespace { 87 | opacity: 1; 88 | } 89 | } 90 | .line:hover, 91 | .cursor-line { 92 | // brightens the next comment line (splash fade effect) 93 | + .line { 94 | .syntax--comment { 95 | opacity: 0.7; 96 | } 97 | } 98 | .syntax--comment { 99 | opacity: 1 !important; 100 | } 101 | } 102 | } 103 | 104 | .syntax--keyword { 105 | color: @purple; 106 | 107 | &.syntax--control { 108 | color: @purple; 109 | } 110 | 111 | &.syntax--operator { 112 | color: @red; 113 | } 114 | 115 | &.syntax--other.syntax--special-method { 116 | color: @blue; 117 | } 118 | 119 | &.syntax--other.syntax--unit { 120 | color: @red; 121 | } 122 | } 123 | 124 | .syntax--storage { 125 | color: @blue; 126 | } 127 | 128 | .syntax--constant { 129 | color: @purple; 130 | 131 | &.syntax--character.syntax--escape { 132 | color: @cyan; 133 | } 134 | 135 | &.syntax--numeric { 136 | color: @purple; 137 | } 138 | 139 | &.syntax--other.syntax--color { 140 | color: @cyan; 141 | } 142 | 143 | &.syntax--other.syntax--symbol { 144 | color: @green; 145 | } 146 | } 147 | 148 | .syntax--variable { 149 | 150 | &.syntax--interpolation { 151 | color: darken(@red, 10%); 152 | } 153 | 154 | &.syntax--parameter.syntax--function { 155 | color: @syntax-text-color; 156 | } 157 | &.syntax--dom { 158 | color: @green; 159 | } 160 | &.syntax--other { 161 | color: @light-orange; 162 | } 163 | } 164 | 165 | .highlight-underline(@color) { 166 | // We are using mix() instead of fade() to work around 167 | // an ugly issue where 'transparent' passed through 168 | // fade reveals an ugly, darker color. 169 | // The things we do for good design. 170 | background-color: mix(@color, @dark-gray, 10%); 171 | box-shadow: 172 | inset 0 -1px 0 @color, 173 | 0 7px 17px mix(@color, @dark-gray, 50%); 174 | } 175 | .highlight-underline(@color1; @color2) { 176 | @name: replace("pulse-underline-@{color1}", "#", ""); 177 | 178 | animation: ~"@{name}" 2s ease 3; 179 | animation-fill-mode: forwards; 180 | @keyframes ~"@{name}" { 181 | 0%, 100% { 182 | // make sure the highlight color is color1 183 | // this ensures the error is highlighted the instant it's typed 184 | .highlight-underline(@color1); 185 | } 186 | 20% { 187 | .highlight-underline(@color2); 188 | } 189 | } 190 | } 191 | 192 | // error text 193 | .syntax--invalid.syntax--illegal, .spell-check-misspelling .region { 194 | .highlight-underline( 195 | mix(@background-color-error, @dark-gray, 30%); 196 | @background-color-error 197 | ); 198 | will-change: background-color, box-shadow; 199 | border-bottom: none; 200 | } 201 | 202 | .syntax--string { 203 | color: @orange; 204 | 205 | &.syntax--regexp { 206 | color: @cyan; 207 | 208 | .syntax--source.syntax--ruby.syntax--embedded { 209 | color: @orange; 210 | } 211 | } 212 | 213 | &.syntax--other.syntax--link { 214 | color: @red; 215 | } 216 | } 217 | 218 | .syntax--punctuation { 219 | &.syntax--definition { 220 | &.syntax--comment { 221 | color: lighten(@light-gray, 10%); 222 | } 223 | 224 | &.syntax--array, 225 | &.syntax--parameters, 226 | &.syntax--variable, 227 | &.syntax--bracket { 228 | color:lighten(@light-gray, 10%); 229 | } 230 | &.syntax--string { 231 | color: @light-orange; 232 | } 233 | 234 | &.syntax--heading, 235 | &.syntax--identity { 236 | color: @blue; 237 | } 238 | 239 | &.syntax--bold { 240 | color: @light-orange; 241 | font-weight: bold; 242 | } 243 | 244 | &.syntax--italic { 245 | color: @purple; 246 | font-style: italic; 247 | } 248 | } 249 | 250 | &.syntax--section.syntax--embedded { 251 | color: darken(@red, 10%); 252 | } 253 | 254 | &.syntax--tag { 255 | &.syntax--liquid { 256 | color: @purple; 257 | .syntax--liquid { 258 | color: @purple; 259 | } 260 | } 261 | } 262 | &.syntax--terminator { 263 | color: @light-gray; 264 | } 265 | } 266 | 267 | .syntax--support { 268 | &.syntax--class { 269 | color: @light-orange; 270 | } 271 | 272 | &.syntax--function { 273 | color: @red; 274 | 275 | &.syntax--any-method { 276 | color: @blue; 277 | } 278 | } 279 | &.syntax--property-name { 280 | color: @blue; 281 | } 282 | } 283 | 284 | .syntax--entity { 285 | &.syntax--name.syntax--function { 286 | color: @red; 287 | } 288 | 289 | &.syntax--name.syntax--type { 290 | color: @green; 291 | text-decoration: none; 292 | } 293 | 294 | &.syntax--other.syntax--inherited-class { 295 | color: @green; 296 | } 297 | 298 | &.syntax--name.syntax--class, 299 | &.syntax--name.syntax--type.syntax--class { 300 | color: @light-orange; 301 | } 302 | 303 | &.syntax--name.syntax--section { 304 | color: @blue; 305 | } 306 | 307 | &.syntax--name.syntax--tag { 308 | color: @red; 309 | text-decoration: none; 310 | } 311 | 312 | &.syntax--other.syntax--attribute-name { 313 | color: @green; 314 | 315 | &.syntax--id { 316 | color: @green; 317 | } 318 | } 319 | } 320 | 321 | .syntax--meta { 322 | &.syntax--class { 323 | color: @light-orange; 324 | } 325 | 326 | &.syntax--link { 327 | color: @orange; 328 | } 329 | &.syntax--delimiter { 330 | color: @light-gray; 331 | } 332 | &.syntax--require { 333 | color: @blue; 334 | } 335 | 336 | &.syntax--selector { 337 | color: @purple; 338 | } 339 | 340 | &.syntax--separator { 341 | background-color: @gray; 342 | color: @syntax-text-color; 343 | } 344 | &.syntax--brace { 345 | color: @light-gray; 346 | } 347 | &.syntax--tag { 348 | color: @light-gray; 349 | } 350 | } 351 | 352 | .syntax--none { 353 | color: @syntax-text-color; 354 | } 355 | 356 | .syntax--markup { 357 | &.syntax--bold { 358 | color: @orange; 359 | font-weight: bold; 360 | } 361 | 362 | &.syntax--changed { 363 | color: @purple; 364 | } 365 | 366 | &.syntax--deleted { 367 | color: @red; 368 | } 369 | 370 | &.syntax--italic { 371 | color: @purple; 372 | font-style: italic; 373 | } 374 | 375 | &.syntax--heading { 376 | .syntax--punctuation { 377 | &.syntax--definition { 378 | &.syntax--heading { 379 | color: @blue; 380 | } 381 | } 382 | 383 | } 384 | } 385 | 386 | &.syntax--inserted { 387 | color: @green; 388 | } 389 | 390 | &.syntax--list { 391 | color: @red; 392 | } 393 | 394 | &.syntax--quote { 395 | color: @orange; 396 | } 397 | 398 | &.syntax--raw.syntax--inline { 399 | color: @green; 400 | } 401 | } 402 | 403 | .syntax--source.syntax--gfm .syntax--markup { 404 | -webkit-font-smoothing: auto; 405 | 406 | &.syntax--heading { 407 | color: @green; 408 | } 409 | } 410 | // Mini editor 411 | atom-text-editor[mini] .scroll-view { 412 | padding-left: 1px; 413 | } --------------------------------------------------------------------------------