├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── assets ├── html.png ├── javascript.png ├── ruby.png └── scss.png ├── index.less ├── package.json └── styles ├── base.less ├── colors.less └── syntax-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.1.4 - Second Release 2 | * Fix deprecation warnings 3 | * Skip 3 minor versions. SMH `apm publish`. 4 | 5 | ## 0.1.0 - First Release 6 | * Open sourcing 7 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 Justin Licata 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ninja-UI Syntax Theme, for Atom 2 | 3 | Beautiful syntax theme inspired by 4 | [a Dribbble shot](https://dribbble.com/shots/2932388-code-editor-redesign), 5 | by [uixninja](https://dribbble.com/uixninja). 6 | 7 | --- 8 | 9 | ### Installation 10 | 11 | ```bash 12 | apm install ninja-ui-syntax 13 | ``` 14 | 15 | ### Screenshots 16 | 17 | *JavaScript* 18 | ![Screenshot of JavaScript](https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/master/assets/javascript.png) 19 | 20 | *Ruby* 21 | ![Screenshot of Ruby](https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/master/assets/ruby.png) 22 | 23 | *HTML* 24 | ![Screenshot of HTML](https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/master/assets/html.png) 25 | 26 | *SCSS* 27 | ![Screenshot of SCSS](https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/master/assets/scss.png) 28 | 29 | ### License 30 | 31 | MIT @ [Justin Licata](https://twitter.com/justinlicata) 32 | -------------------------------------------------------------------------------- /assets/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/4c70efc54526dafcea586a5d19308bc21c79b0c0/assets/html.png -------------------------------------------------------------------------------- /assets/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/4c70efc54526dafcea586a5d19308bc21c79b0c0/assets/javascript.png -------------------------------------------------------------------------------- /assets/ruby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/4c70efc54526dafcea586a5d19308bc21c79b0c0/assets/ruby.png -------------------------------------------------------------------------------- /assets/scss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licatajustin/ninja-ui-syntax/4c70efc54526dafcea586a5d19308bc21c79b0c0/assets/scss.png -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "./styles/base.less"; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ninja-ui-syntax", 3 | "theme": "syntax", 4 | "version": "0.1.4", 5 | "description": "Beautiful syntax theme inspired by a Dribbble shot.", 6 | "keywords": [ 7 | "syntax", 8 | "theme", 9 | "uixninja", 10 | "dribbble", 11 | "ninja", 12 | "beautiful" 13 | ], 14 | "repository": "https://github.com/licatajustin/ninja-ui-syntax.git", 15 | "license": "MIT", 16 | "engines": { 17 | "atom": ">=1.0.0 <2.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /styles/base.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | .panel-contrast .tree-view {} 4 | 5 | atom-text-editor { 6 | background-image: radial-gradient( 7 | circle at top right, 8 | lighten(@syntax-background-color, 3%), 9 | @syntax-background-color 10 | ); 11 | color: @syntax-text-color; 12 | 13 | .wrap-guide { 14 | background-color: @syntax-wrap-guide-color; 15 | } 16 | 17 | .indent-guide { 18 | color: @syntax-indent-guide-color; 19 | } 20 | 21 | .invisible-character { 22 | color: @syntax-invisible-character-color; 23 | } 24 | 25 | .gutter { 26 | background-color: @syntax-gutter-background-color; 27 | color: @syntax-gutter-text-color; 28 | 29 | .line-number { 30 | &.cursor-line { 31 | background-color: @syntax-gutter-background-color-selected; 32 | color: @syntax-gutter-text-color-selected; 33 | } 34 | 35 | &.cursor-line-no-selection { 36 | color: @syntax-gutter-text-color-selected; 37 | } 38 | } 39 | } 40 | 41 | .gutter .line-number.folded, 42 | .gutter .line-number:after, 43 | .fold-marker:after { 44 | color: @light-gray; 45 | } 46 | 47 | .invisible { 48 | color: @syntax-text-color; 49 | } 50 | 51 | .cursor { 52 | color: @syntax-cursor-color; 53 | } 54 | 55 | .selection .region { 56 | background-color: @syntax-selection-color; 57 | } 58 | } 59 | 60 | atom-text-editor .search-results .syntax--marker .region { 61 | background-color: transparent; 62 | border: 1px solid @syntax-result-marker-color; 63 | } 64 | 65 | atom-text-editor .search-results .syntax--marker.current-result .region { 66 | border: 1px solid @syntax-result-marker-color-selected; 67 | } 68 | 69 | 70 | // Syntax styles 71 | 72 | .syntax--comment { 73 | color: @light-gray; 74 | } 75 | 76 | .syntax--keyword { 77 | color: @purple; 78 | 79 | &.syntax--control { 80 | color: @purple; 81 | } 82 | 83 | &.syntax--operator { 84 | color: @syntax-text-color; 85 | } 86 | 87 | &.syntax--other.syntax--special-method { 88 | color: @blue; 89 | } 90 | 91 | &.syntax--other.syntax--unit { 92 | color: @orange; 93 | } 94 | } 95 | 96 | .syntax--storage { 97 | color: @purple; 98 | } 99 | 100 | .syntax--constant { 101 | color: @orange; 102 | 103 | &.syntax--character.syntax--escape { 104 | color: @cyan; 105 | } 106 | 107 | &.syntax--numeric { 108 | color: @orange; 109 | } 110 | 111 | &.syntax--other.syntax--color { 112 | color: @cyan; 113 | } 114 | 115 | &.syntax--other.syntax--symbol { 116 | color: @green; 117 | } 118 | } 119 | 120 | .syntax--variable { 121 | color: @red; 122 | 123 | &.syntax--interpolation { 124 | color: darken(@red, 10%); 125 | } 126 | 127 | &.syntax--parameter.syntax--function, 128 | &.syntax--dollar { 129 | color: @syntax-text-color; 130 | } 131 | } 132 | 133 | .syntax--invalid.syntax--illegal { 134 | background-color: @red; 135 | color: @syntax-background-color; 136 | } 137 | 138 | .syntax--string { 139 | color: @syntax-text-color; 140 | 141 | &.syntax--regexp, 142 | &.syntax--quoted { 143 | color: @cyan; 144 | 145 | .syntax--source.syntax--ruby.syntax--embedded { 146 | color: @orange; 147 | } 148 | } 149 | 150 | &.syntax--other.syntax--link { 151 | color: @red; 152 | } 153 | } 154 | 155 | .syntax--punctuation { 156 | &.syntax--definition { 157 | &.syntax--comment { 158 | color: @light-gray; 159 | } 160 | 161 | &.syntax--string, 162 | &.syntax--variable, 163 | &.syntax--parameters, 164 | &.syntax--array { 165 | color: @syntax-text-color; 166 | } 167 | 168 | &.syntax--heading, 169 | &.syntax--identity { 170 | color: @blue; 171 | } 172 | 173 | &.syntax--bold { 174 | color: @light-orange; 175 | font-weight: bold; 176 | } 177 | 178 | &.syntax--italic { 179 | color: @purple; 180 | font-style: italic; 181 | } 182 | } 183 | 184 | &.syntax--section.syntax--embedded { 185 | color: darken(@red, 10%); 186 | } 187 | 188 | } 189 | 190 | .syntax--support { 191 | &.syntax--class, 192 | &.syntax--type { 193 | color: @light-orange; 194 | } 195 | 196 | &.syntax--function { 197 | color: @cyan; 198 | 199 | &.syntax--any-method { 200 | color: @blue; 201 | } 202 | } 203 | } 204 | 205 | .syntax--entity { 206 | &.syntax--name.syntax--function { 207 | color: @blue; 208 | } 209 | &.syntax--name.syntax--type { 210 | color: @light-orange; 211 | text-decoration: underline; 212 | } 213 | 214 | &.syntax--other.syntax--inherited-class { 215 | color: @green; 216 | } 217 | &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class { 218 | color: @light-orange; 219 | } 220 | 221 | &.syntax--name.syntax--section { 222 | color: @blue; 223 | } 224 | 225 | &.syntax--name.syntax--tag { 226 | color: @red; 227 | text-decoration: underline; 228 | } 229 | 230 | &.syntax--other.syntax--attribute-name { 231 | color: @orange; 232 | 233 | &.syntax--id { 234 | color: @blue; 235 | } 236 | } 237 | } 238 | 239 | .syntax--meta { 240 | &.syntax--class { 241 | color: @light-orange; 242 | } 243 | 244 | &.syntax--link { 245 | color: @orange; 246 | } 247 | 248 | &.syntax--require { 249 | color: @blue; 250 | } 251 | 252 | &.syntax--selector { 253 | color: @purple; 254 | } 255 | 256 | &.syntax--separator { 257 | background-color: @gray; 258 | color: @syntax-text-color; 259 | } 260 | } 261 | 262 | .syntax--none { 263 | color: @syntax-text-color; 264 | } 265 | 266 | .syntax--markup { 267 | &.syntax--bold { 268 | color: @orange; 269 | font-weight: bold; 270 | } 271 | 272 | &.syntax--changed { 273 | color: @purple; 274 | } 275 | 276 | &.syntax--deleted { 277 | color: @red; 278 | } 279 | 280 | &.syntax--italic { 281 | color: @purple; 282 | font-style: italic; 283 | } 284 | 285 | &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading { 286 | color: @blue; 287 | } 288 | 289 | &.syntax--inserted { 290 | color: @green; 291 | } 292 | 293 | &.syntax--list { 294 | color: @red; 295 | } 296 | 297 | &.syntax--quote { 298 | color: @orange; 299 | } 300 | 301 | &.syntax--raw.syntax--inline { 302 | color: @green; 303 | } 304 | } 305 | 306 | .syntax--source.syntax--gfm .syntax--markup { 307 | -webkit-font-smoothing: auto; 308 | &.syntax--heading { 309 | color: @green; 310 | } 311 | } 312 | 313 | 314 | // Mini editor 315 | 316 | atom-text-editor[mini] .scroll-view { 317 | padding-left: 1px; 318 | } 319 | -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | // These colors are specific to the theme. Do not use in a package! 2 | 3 | @very-light-gray: #a0a2db; 4 | @light-gray: #7274b0; 5 | @gray: #535275; 6 | @dark-gray: #313057; 7 | @very-dark-gray: #212337; 8 | 9 | @cyan: #78fbe4; 10 | @blue: #6f99ff; 11 | @purple: #b27af8; 12 | @green: @cyan; 13 | @red: #fd7ab2; 14 | @orange: #faa75f; 15 | @light-orange: #f6d47d; 16 | -------------------------------------------------------------------------------- /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: lighten(@dark-gray, 10%); 10 | @syntax-background-color: @very-dark-gray; 11 | 12 | // Guide colors 13 | @syntax-wrap-guide-color: @dark-gray; 14 | @syntax-indent-guide-color: fade(@gray, 25%); 15 | @syntax-invisible-character-color: fade(@gray, 25%); 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: @very-light-gray; 23 | @syntax-gutter-text-color-selected: @syntax-gutter-text-color; 24 | @syntax-gutter-background-color: @very-dark-gray; 25 | @syntax-gutter-background-color-selected: @dark-gray; 26 | 27 | // For git diff info. i.e. in the gutter 28 | @syntax-color-renamed: @blue; 29 | @syntax-color-added: @green; 30 | @syntax-color-modified: @orange; 31 | @syntax-color-removed: @red; 32 | --------------------------------------------------------------------------------