├── .gitignore ├── LICENSE ├── README.md ├── docs ├── duotone.css ├── index.html ├── palette.css ├── palette.js ├── screenshot.png └── update.sh ├── index.less ├── package.json └── styles ├── colors.less ├── editor.less ├── languages ├── _base.less ├── _index.less ├── c.less ├── clojure.less ├── coffee.less ├── cs.less ├── css.less ├── gfm.less ├── haskell.less ├── html.less ├── jade.less ├── java.less ├── javascript.less ├── json.less ├── less.less ├── mediawiki.less ├── php.less ├── python.less ├── sass.less ├── scss.less ├── slim.less ├── stylus.less ├── tex.less ├── text.less └── yaml.less ├── palette.less └── syntax-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store 32 | .DS_Store? 33 | ._* 34 | .Spotlight-V100 35 | .Trashes 36 | ehthumbs.db 37 | Thumbs.db 38 | 39 | # Node installed packages # 40 | ########################### 41 | node_modules/* 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 simurai 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. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Note: This theme is __deprecated__. Take a look at [tone-syntax](https://atom.io/packages/tone-syntax) that is somewhat similar. 2 | 3 | # DuoTone Syntax (master) 4 | 5 | A double-hue syntax theme for Atom. 6 | 7 | 8 | ![DuoTone Theme](https://github.com/simurai/duotone-syntax/raw/master/docs/screenshot.png) 9 | 10 | DuoTone themes use only 2 hues (8 shades in total). It __tones down__ less important parts (like punctuation and brackets) and highlights only the __important__ ones. This leads to a more calm color scheme, but still lets you find the stuff you're looking for. 11 | 12 | ## Language support 13 | 14 | DuoTone themes are optimized for many languages: 15 | 16 | > C, Clojure, CoffeeScript, C#, CSS, GF Markdown, Go, Haskell, HTML, Java, JavaScript, JSON, Less, Perl, PHP, Python, Ruby, SASS, SCSS, Stylus, XML, YAML... 17 | 18 | See the list of [all languages](/styles/languages). 19 | 20 | 21 | ## Variations 22 | 23 | Here a list of all [DuoTone themes](https://atom.io/themes/search?utf8=%E2%9C%93&q=keyword:duotone). Or at least the ones that have the `duotone` keyword added. :grin: 24 | 25 | 26 | ## Create your own DuoTone theme 27 | 28 | Follow the short guide how to create your own DuoTone version. 29 | 30 | 1. Clone this repo. 31 | 2. Rename it (folder, package.json, etc). 32 | 3. Change the colors in `styles/colors.less`. 33 | 4. Publish! 34 | 35 | Optionally, also update the `docs`. It's a page with all colors and some sample code. It can be used as a GitHub Page, when the `/docs` folder is enabled in the repo settings. 36 | 37 | 1. Run `docs/update.sh` to update the theme colors. 38 | 2. Replace the `xxx` in `docs/index.html` with your own user and theme name. 39 | 3. Take a screenshot and replace (`docs/screenshot.png`) with your version. 40 | 41 | For more help, feel free to open a new issue. 42 | -------------------------------------------------------------------------------- /docs/duotone.css: -------------------------------------------------------------------------------- 1 | atom-text-editor, 2 | :host { 3 | color: #cab2fa; 4 | background-color: #2c2734; 5 | } 6 | atom-text-editor .line.cursor-line, 7 | :host .line.cursor-line { 8 | background-color: rgba(73, 66, 87, 0.26); 9 | } 10 | atom-text-editor .invisible, 11 | :host .invisible { 12 | color: #cab2fa; 13 | } 14 | atom-text-editor .cursor, 15 | :host .cursor { 16 | border-color: #ffa352; 17 | border-left-width: 2px; 18 | } 19 | atom-text-editor .selection .region, 20 | :host .selection .region { 21 | background-color: #494257; 22 | } 23 | atom-text-editor .bracket-matcher .region, 24 | :host .bracket-matcher .region { 25 | border-bottom: 1px solid #ffa352; 26 | } 27 | atom-text-editor .invisible-character, 28 | :host .invisible-character { 29 | color: #443d51; 30 | -webkit-font-smoothing: antialiased; 31 | } 32 | atom-text-editor .indent-guide, 33 | :host .indent-guide { 34 | color: #443d51; 35 | } 36 | atom-text-editor .wrap-guide, 37 | :host .wrap-guide { 38 | background-color: #443d51; 39 | } 40 | atom-text-editor .find-result .region.region.region, 41 | :host .find-result .region.region.region, 42 | atom-text-editor .current-result .region.region.region, 43 | :host .current-result .region.region.region { 44 | border-radius: 0px; 45 | background-color: rgba(255, 163, 82, 0.16); 46 | transition: border-color 0.4s; 47 | } 48 | atom-text-editor .find-result .region.region.region, 49 | :host .find-result .region.region.region { 50 | border: 2px solid transparent; 51 | } 52 | atom-text-editor .current-result .region.region.region, 53 | :host .current-result .region.region.region { 54 | border: 2px solid #ffa352; 55 | transition-duration: .1s; 56 | } 57 | atom-text-editor .gutter .line-number, 58 | :host .gutter .line-number { 59 | color: #715f95; 60 | -webkit-font-smoothing: antialiased; 61 | } 62 | atom-text-editor .gutter .line-number.git-line-removed:before, 63 | :host .gutter .line-number.git-line-removed:before { 64 | bottom: -3px; 65 | } 66 | atom-text-editor .gutter .line-number.git-line-removed:after, 67 | :host .gutter .line-number.git-line-removed:after { 68 | content: ""; 69 | position: absolute; 70 | left: 0px; 71 | bottom: 0px; 72 | width: 25px; 73 | border-bottom: 1px dotted rgba(224, 82, 82, 0.5); 74 | pointer-events: none; 75 | } 76 | atom-text-editor .gutter .line-number.cursor-line, 77 | :host .gutter .line-number.cursor-line { 78 | color: #cab2fa; 79 | background-color: #332e3d; 80 | } 81 | atom-text-editor .gutter .line-number.cursor-line-no-selection, 82 | :host .gutter .line-number.cursor-line-no-selection { 83 | background-color: transparent; 84 | } 85 | atom-text-editor .gutter .line-number .icon-right, 86 | :host .gutter .line-number .icon-right { 87 | color: #cab2fa; 88 | } 89 | atom-text-editor .gutter .line-number.folded, 90 | :host .gutter .line-number.folded, 91 | atom-text-editor .gutter .line-number:after, 92 | :host .gutter .line-number:after, 93 | atom-text-editor .fold-marker:after, 94 | :host .fold-marker:after { 95 | color: #cab2fa; 96 | } 97 | .uno-1 { 98 | color: #f1ebff; 99 | } 100 | .uno-2 { 101 | color: #cab2fa; 102 | } 103 | .uno-3 { 104 | color: #ae91e8; 105 | } 106 | .uno-4 { 107 | color: #715f95; 108 | } 109 | .uno-5 { 110 | color: #544d60; 111 | } 112 | .duo-1 { 113 | color: #fec38f; 114 | } 115 | .duo-2 { 116 | color: #b07745; 117 | } 118 | .duo-3 { 119 | color: #765f4c; 120 | } 121 | .meta { 122 | color: #544d60; 123 | } 124 | .html.elements, 125 | .entity, 126 | .tag, 127 | .function-call { 128 | color: #f1ebff; 129 | } 130 | .attribute-name, 131 | .character.escape { 132 | color: #ae91e8; 133 | } 134 | .support { 135 | color: #715f95; 136 | } 137 | .variable { 138 | color: #ae91e8; 139 | } 140 | .string, 141 | .constant, 142 | .storage.type { 143 | color: #fec38f; 144 | } 145 | .keyword, 146 | .storage { 147 | color: #b07745; 148 | } 149 | .punctuation, 150 | .bracket, 151 | .brace { 152 | color: #544d60; 153 | } 154 | .string .punctuation { 155 | color: #765f4c; 156 | } 157 | .comment { 158 | color: #715f95; 159 | font-style: italic; 160 | } 161 | .bold { 162 | font-weight: bold; 163 | } 164 | .italic { 165 | font-style: italic; 166 | } 167 | .c .parens, 168 | .c .block { 169 | color: #cab2fa; 170 | } 171 | .c .parens .punctuation, 172 | .c .block .punctuation, 173 | .c .parens .bracket, 174 | .c .block .bracket, 175 | .c .parens .brace, 176 | .c .block .brace { 177 | color: #544d60; 178 | } 179 | .c .parens .string .punctuation, 180 | .c .block .string .punctuation { 181 | color: #765f4c; 182 | } 183 | .c .comment { 184 | color: #765f4c; 185 | } 186 | .source.clojure .expression { 187 | color: #fec38f; 188 | } 189 | .source.clojure .expression .punctuation { 190 | color: #544d60; 191 | } 192 | .source.clojure .symbol { 193 | color: #cab2fa; 194 | } 195 | .source.clojure .vector { 196 | color: #715f95; 197 | } 198 | .coffee.source { 199 | color: #715f95; 200 | } 201 | .source.cs .meta { 202 | color: #715f95; 203 | } 204 | .source.cs .method { 205 | color: #cab2fa; 206 | } 207 | .css.source { 208 | color: #544d60; 209 | } 210 | .css.support.property-name { 211 | color: #ae91e8; 212 | } 213 | .css.attribute-name.id, 214 | .css.attribute-name.class, 215 | .css.attribute-name.parent-selector { 216 | color: #f1ebff; 217 | } 218 | .css.unit { 219 | color: #b07745; 220 | } 221 | .css.function { 222 | color: #765f4c; 223 | } 224 | .css.punctuation.terminator { 225 | color: #765f4c; 226 | } 227 | .css.at-rule { 228 | color: #f1ebff; 229 | } 230 | .css.at-rule .keyword.punctuation { 231 | color: inherit; 232 | } 233 | .gfm { 234 | color: #f1ebff; 235 | } 236 | .gfm .punctuation, 237 | .gfm .bracket, 238 | .gfm .brace { 239 | color: #544d60; 240 | } 241 | .gfm .string .punctuation { 242 | color: #765f4c; 243 | } 244 | .gfm .link { 245 | color: #cab2fa; 246 | } 247 | .gfm.markup { 248 | color: #cab2fa; 249 | } 250 | .gfm.markup.bold { 251 | font-weight: bold; 252 | } 253 | .gfm.markup.italic { 254 | font-style: italic; 255 | } 256 | .gfm.markup.strike { 257 | color: #544d60; 258 | text-decoration: line-through; 259 | } 260 | .gfm.markup.raw { 261 | color: #fec38f; 262 | } 263 | .gfm.markup.raw .support, 264 | .gfm.markup.code .support { 265 | color: #715f95; 266 | } 267 | .gfm.comment { 268 | color: #715f95; 269 | } 270 | .gfm.comment.quote { 271 | color: #cab2fa; 272 | } 273 | .gfm.table { 274 | color: #fec38f; 275 | } 276 | .gfm.table .border, 277 | .gfm.table .pipe { 278 | color: #544d60; 279 | } 280 | .gfm.variable, 281 | .gfm.entity { 282 | color: #fec38f; 283 | } 284 | .gfm.support { 285 | color: #b07745; 286 | } 287 | .gfm.heading-1, 288 | .gfm.heading-2, 289 | .gfm.heading-3 { 290 | color: #fec38f; 291 | } 292 | .gfm.heading-4, 293 | .gfm.heading-5, 294 | .gfm.heading-6 { 295 | color: #b07745; 296 | } 297 | .haskell.source { 298 | color: #cab2fa; 299 | } 300 | .haskell.source .punctuation, 301 | .haskell.source .bracket, 302 | .haskell.source .brace { 303 | color: #544d60; 304 | } 305 | .haskell.source .string .punctuation { 306 | color: #765f4c; 307 | } 308 | .html.meta { 309 | color: #544d60; 310 | } 311 | .html.embedded .meta, 312 | .html.doctype, 313 | .html.text { 314 | color: #715f95; 315 | } 316 | .html .string .id { 317 | color: #fec38f; 318 | } 319 | .jade.text, 320 | .jade .constant.name.attribute.tag { 321 | color: #715f95; 322 | } 323 | .jade .meta.control.flow { 324 | color: #cab2fa; 325 | } 326 | .jade .attribute-name.id { 327 | color: #fec38f; 328 | } 329 | .java .method { 330 | color: #cab2fa; 331 | } 332 | .java .method .punctuation, 333 | .java .method .bracket, 334 | .java .method .brace { 335 | color: #544d60; 336 | } 337 | .java .method .string .punctuation { 338 | color: #765f4c; 339 | } 340 | .java .dereference { 341 | color: #715f95; 342 | } 343 | .js.source { 344 | color: #cab2fa; 345 | } 346 | .js.source .punctuation, 347 | .js.source .bracket, 348 | .js.source .brace { 349 | color: #544d60; 350 | } 351 | .js.source .string .punctuation { 352 | color: #765f4c; 353 | } 354 | .json .string { 355 | color: #cab2fa; 356 | } 357 | .json .string .punctuation { 358 | color: #544d60; 359 | } 360 | .json .value > .string { 361 | color: #fec38f; 362 | } 363 | .json .value > .string .punctuation { 364 | color: #544d60; 365 | } 366 | .json .value .constant { 367 | color: #b07745; 368 | } 369 | .less.variable:first-child { 370 | color: #cab2fa; 371 | } 372 | .less .mixin { 373 | color: #b07745; 374 | } 375 | .mediawiki { 376 | color: #f1ebff; 377 | } 378 | .mediawiki .punctuation, 379 | .mediawiki .bracket, 380 | .mediawiki .brace { 381 | color: #544d60; 382 | } 383 | .mediawiki .string .punctuation { 384 | color: #765f4c; 385 | } 386 | .mediawiki .wiki-link { 387 | color: #cab2fa; 388 | } 389 | .mediawiki .heading { 390 | color: #fec38f; 391 | } 392 | .mediawiki .function-call { 393 | color: #b07745; 394 | } 395 | .mediawiki .value { 396 | color: #fec38f; 397 | } 398 | .mediawiki .fix_this_later { 399 | color: #cab2fa; 400 | } 401 | .mediawiki .pipe, 402 | .mediawiki .link, 403 | .mediawiki .tag { 404 | color: #544d60; 405 | } 406 | .php .string-contents { 407 | color: #fec38f; 408 | } 409 | .sass .at-rule .at-rule, 410 | .sass .at-rule .at-rule > .punctuation { 411 | color: #f1ebff; 412 | } 413 | .sass .mixin + .function, 414 | .sass .include + .function { 415 | color: #b07745; 416 | } 417 | .sass.property-value { 418 | color: #fec38f; 419 | } 420 | .sass.property-value .function { 421 | color: #cab2fa; 422 | } 423 | .sass.property-value .punctuation { 424 | color: #544d60; 425 | } 426 | .sass.variable.parameter.url { 427 | color: #fec38f; 428 | } 429 | .sass.class, 430 | .sass.parent-selector-suffix { 431 | color: #f1ebff; 432 | } 433 | .scss .at-rule .at-rule, 434 | .scss .at-rule .at-rule > .punctuation { 435 | color: #f1ebff; 436 | } 437 | .scss .mixin + .function, 438 | .scss .include + .function { 439 | color: #b07745; 440 | } 441 | .scss.property-value { 442 | color: #fec38f; 443 | } 444 | .scss.property-value .function { 445 | color: #cab2fa; 446 | } 447 | .scss.property-value .punctuation { 448 | color: #544d60; 449 | } 450 | .scss.variable.parameter.url { 451 | color: #fec38f; 452 | } 453 | .scss.class, 454 | .scss.parent-selector-suffix { 455 | color: #f1ebff; 456 | } 457 | .slim.meta { 458 | color: #544d60; 459 | } 460 | .slim.text { 461 | color: #715f95; 462 | } 463 | .slim .string .id { 464 | color: #fec38f; 465 | } 466 | .stylus .function .name { 467 | color: #b07745; 468 | } 469 | .tex .other { 470 | color: #b07745; 471 | } 472 | .tex .reference { 473 | color: #cab2fa; 474 | } 475 | .plain .text { 476 | color: #f1ebff; 477 | } 478 | .yaml .tag { 479 | color: #cab2fa; 480 | } 481 | .yaml .constant { 482 | color: #b07745; 483 | } 484 | .yaml .punctuation { 485 | color: #544d60; 486 | } 487 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DuoTone Theme 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

15 |
16 | Duo 19 |
20 |
21 | Tone 25 |
26 |
themeNAME
27 |

28 | 29 |
30 |
uno-1
31 |
uno-2
32 |
uno-3
33 |
uno-4
34 |
uno-5
35 | 36 |
duo-1
37 |
duo-2
38 |
duo-3
39 | 40 |
background
41 |
42 |
43 | 44 |
45 | 46 | 47 | 
48 |   
<html>
  <head>
    <title>DuoTone</title>
    <meta charset=“utf-8”>
    <link rel=“stylesheet” href=“styles.css”>
  </head>
  <body>Hi</body>
</html>

49 |
50 | 51 | 
52 |   
body {
  padding: 1em;
  color: hsl(0, 0%, 100%);
  background-color: coral;
}
 
/* Viewport based padding */
@media (max-width: 800px) {
  body { padding: 4vh 8vw; }
}

53 |
54 | 55 | 
56 |   
// Get a desaturated base color
function getBaseColor() {
  let baseColor = chroma.random()
  while (chroma(baseColor).hsl()[1] > 1 / 3) {
    baseColor = chroma(baseColor).desaturate(1 / 8).hex()
  }
  return baseColor
}

57 |
58 | 59 |
60 | 61 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /docs/palette.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | height: 100%; 7 | font-size: 18px; 8 | font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | height: 100%; 14 | } 15 | 16 | atom-text-editor { 17 | display: block; 18 | min-height: 100%; 19 | overflow: hidden; 20 | } 21 | 22 | a { 23 | text-decoration: none; 24 | } 25 | 26 | /* Header ------------- */ 27 | 28 | header { 29 | position: relative; 30 | display: flex; 31 | flex-wrap: wrap; 32 | justify-content: center; 33 | align-items: center; 34 | margin: 0 auto; 35 | max-width: 50em; 36 | padding: 2em; 37 | text-align: center; 38 | } 39 | 40 | .logo { 41 | display: block; 42 | margin: 2em; 43 | width: 15em; 44 | padding: 6em 0; 45 | font-size: inherit; 46 | font-weight: 700; 47 | line-height: 0.9; 48 | text-align: center; 49 | border: 2px solid hsla(0,0%,100%,.1); 50 | } 51 | .logo-row { 52 | display: block; 53 | text-transform: uppercase 54 | } 55 | .logo-row:nth-child(1) { font-size: 2.5em; } 56 | .logo-row:nth-child(2) { font-size: 2em; } 57 | 58 | .logo-name { 59 | display: block; 60 | font-size: 1.2em; 61 | font-style: italic; 62 | font-weight: 300; 63 | margin-top: 2em; 64 | } 65 | .logo-name span { 66 | font-style: normal; 67 | font-size: 1.2em; 68 | } 69 | 70 | 71 | 72 | /* Palette ------------- */ 73 | 74 | .palette { 75 | margin: 2em; 76 | } 77 | 78 | .palette-color { 79 | font-family: 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 80 | } 81 | 82 | .palette-color:before { 83 | content: ""; 84 | display: inline-block; 85 | width: .8em; 86 | height: 1.6em; 87 | margin-right: 1em; 88 | vertical-align: middle; 89 | background-color: currentColor; 90 | } 91 | .palette-color.bg:before { 92 | box-sizing: border-box; 93 | border: 2px solid hsla(0,0%,100%,.1); 94 | background-color: inherit; 95 | } 96 | 97 | .palette-color.duo-1 { 98 | margin-top: 1em; 99 | } 100 | 101 | .palette-color.bg { 102 | display: none; 103 | } 104 | 105 | .palette-color p, 106 | .palette-color span { 107 | display: inline-block; 108 | margin: 0 .5em; 109 | vertical-align: middle; 110 | } 111 | 112 | 113 | /* Code ------------- */ 114 | 115 | main { 116 | padding: 0 2em; 117 | margin: 0 auto; 118 | max-width: 36em; 119 | } 120 | 121 | .code { 122 | font-family: 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 123 | font-size: .8em; 124 | line-height: 1.5; 125 | } 126 | .code + .code { 127 | margin-top: 2rem; 128 | } 129 | 130 | 131 | 132 | /* Nav ------------- */ 133 | 134 | 135 | nav { 136 | font-size: .8em; 137 | text-align: center; 138 | } 139 | 140 | nav a { 141 | display: inline-block; 142 | width: 4em; 143 | height: 4em; 144 | margin: 2rem; 145 | border: 2px solid hsla(0,0%,100%,.05); 146 | transform: rotate(45deg); 147 | transition: border-color 1s; 148 | } 149 | 150 | header nav a:hover { border-color: hsla(0,0%,100%,.1); transition-duration: .1s; } 151 | header nav a:active { border-color: hsla(0,0%,100%,.2); transition-duration: .05s; } 152 | 153 | .prev { 154 | left: 8vw; 155 | border-right: none; 156 | border-top: none; 157 | } 158 | .next { 159 | right: 8vw; 160 | border-left: none; 161 | border-bottom: none; 162 | } 163 | 164 | 165 | 166 | 167 | /* Footer ------------- */ 168 | 169 | footer { 170 | font-size: .8em; 171 | padding: 2rem; 172 | max-width: 36em; 173 | margin: 0 auto; 174 | text-align: center; 175 | } 176 | 177 | footer .code { 178 | display: block; 179 | padding: .4em .8em; 180 | margin-top: 1em; 181 | border-radius: .2em; 182 | font-size: inherit; 183 | border: 1px solid hsla(0,0%,100%,.1); 184 | } 185 | 186 | .github { 187 | display: inline-block; 188 | margin-top: 2rem; 189 | opacity: .1; 190 | transition: opacity 1.2s; 191 | } 192 | .github:hover { 193 | opacity: 1; 194 | transition-duration: .12s; 195 | } 196 | 197 | .github svg { 198 | fill: currentColor; 199 | } 200 | 201 | 202 | 203 | /* Larger screens ------------- */ 204 | 205 | 206 | @media (min-width: 1000px) { 207 | header { 208 | padding: 4em; 209 | } 210 | .logo, 211 | .palette { 212 | margin: 4em; 213 | } 214 | .palette-color.bg { 215 | display: block; 216 | position: fixed; 217 | right: 4.2em; 218 | bottom: 3em; 219 | transform: rotate(90deg); 220 | transform-origin: top right; 221 | font-size: .75em; 222 | } 223 | .code { 224 | font-size: 1em; 225 | } 226 | .code + .code { 227 | margin-top: 4rem; 228 | } 229 | nav a { 230 | position: absolute; 231 | top: 18em; 232 | } 233 | .prev { 234 | left: 4em; 235 | } 236 | .next { 237 | right: 4em; 238 | } 239 | footer { 240 | padding: 4rem; 241 | } 242 | .github { 243 | margin-top: 4rem; 244 | } 245 | } 246 | 247 | /* Screenshots --------------------------------------- 248 | * Uncomment to clean up 249 | * Dimension 1000x660 250 | **/ 251 | 252 | /*footer, 253 | .palette-color.bg { 254 | display: none; 255 | } 256 | main { 257 | display: none; 258 | margin-bottom: 6em 259 | } 260 | body:not(:hover) nav { 261 | display: none; 262 | }*/ 263 | -------------------------------------------------------------------------------- /docs/palette.js: -------------------------------------------------------------------------------- 1 | function parseColor(color) { 2 | var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); }); 3 | return { 4 | hex: "#" + arr.slice(0, 3).map(toHex).join(""), 5 | opacity: arr.length == 4 ? arr[3] : 1 6 | }; 7 | } 8 | function toHex(int) { 9 | var hex = int.toString(16); 10 | return hex.length == 1 ? "0" + hex : hex; 11 | } 12 | 13 | colors = document.getElementsByClassName('palette-color'); 14 | editor = document.getElementsByTagName('atom-text-editor')[0]; 15 | for (var i = 0; i < colors.length; i++) { 16 | if (i == colors.length - 1) { 17 | // for the last color, use the background color 18 | rgb_col = window.getComputedStyle(editor).backgroundColor; 19 | } else { 20 | rgb_col = window.getComputedStyle(colors[i]).color; 21 | } 22 | hex_col = parseColor(rgb_col); 23 | text = colors[i].textContent; 24 | colors[i].innerHTML = '

' + text + '

' + hex_col.hex + ''; 25 | } 26 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simurai/duotone-syntax/f7f348910271c405d44445b6a12b21967df62f96/docs/screenshot.png -------------------------------------------------------------------------------- /docs/update.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -o nounset 4 | set -o errexit 5 | #set -o xtrace 6 | 7 | # 8 | # Regerate the palette's duotone.css file. Use when the duotone 9 | # less files change. 10 | # 11 | # I couldn't get the browser embeded less.js stuff to work locally - 12 | # there are unsolvable CORS issues with the file:// protocol. This 13 | # means that you would need to be running a local web server to view 14 | # the page. 15 | # 16 | 17 | dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd) 18 | 19 | lessc "$dir/../index.less" "$dir/duotone.css" 20 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone syntax theme 3 | 4 | @import (reference) "styles/syntax-variables"; 5 | @import 'styles/editor'; 6 | @import 'styles/palette'; 7 | @import 'styles/languages/_index'; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "duotone-syntax", 3 | "theme": "syntax", 4 | "version": "2.1.0", 5 | "description": "Master template for DuoTone syntax themes", 6 | "keywords": [ 7 | "duotone", 8 | "syntax" 9 | ], 10 | "repository": "https://github.com/simurai/duotone-syntax", 11 | "license": "MIT", 12 | "engines": { 13 | "atom": ">=1.13.0 <2.0.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone dark 3 | 4 | // Hues ----------------------------------- 5 | @syntax-uno: 240; 6 | @syntax-duo: 150; 7 | 8 | 9 | // Language colors ----------------------------------- 10 | 11 | // Uno hue 12 | @uno-1: hsl(@syntax-uno, 99%, 96%); 13 | @uno-2: hsl(@syntax-uno, 55%, 78%); 14 | @uno-3: hsl(@syntax-uno, 33%, 70%); 15 | @uno-4: hsl(@syntax-uno, 8%, 48%); 16 | @uno-5: hsl(@syntax-uno, 6%, 34%); 17 | 18 | // Duo hue 19 | @duo-1: hsl(@syntax-duo, 99%, 72%); 20 | @duo-2: hsl(@syntax-duo, 44%, 60%); 21 | @duo-3: hsl(@syntax-duo, 22%, 54%); 22 | 23 | 24 | // Base colors ----------------------------------- 25 | @syntax-fg: @uno-2; 26 | @syntax-bg: hsl(@syntax-uno, 14%, 18%); 27 | @syntax-accent: hsl(@syntax-duo, 100%, 66%); 28 | @syntax-guide: lighten(@syntax-bg, 10%); 29 | @syntax-selection: lighten(@syntax-bg, 12%); 30 | @syntax-selection-gutter: lighten(@syntax-bg, 3%); 31 | @syntax-cursor-line: fade(@syntax-selection, 26%); // needs to be semi-transparent to show serach results 32 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | 2 | // Editor styles (background, gutter, guides) 3 | 4 | atom-text-editor { 5 | color: @syntax-text-color; 6 | background-color: @syntax-background-color; 7 | 8 | .line.cursor-line { 9 | background-color: @syntax-cursor-line; 10 | } 11 | 12 | .invisible { 13 | color: @syntax-text-color; 14 | } 15 | 16 | .cursor { 17 | border-color: @syntax-cursor-color; 18 | border-left-width: 2px; 19 | } 20 | 21 | .selection .region { 22 | background-color: @syntax-selection-color; 23 | } 24 | 25 | .bracket-matcher .region { 26 | border-bottom: 1px solid @syntax-accent; 27 | } 28 | 29 | .invisible-character { 30 | color: @syntax-invisible-character-color; 31 | -webkit-font-smoothing: antialiased; 32 | } 33 | 34 | .indent-guide { 35 | color: @syntax-indent-guide-color; 36 | } 37 | 38 | .wrap-guide { 39 | background-color: @syntax-wrap-guide-color; 40 | } 41 | 42 | // find + replace 43 | .find-result .region.region.region, 44 | .current-result .region.region.region { 45 | border-radius: 0px; 46 | background-color: @syntax-result-marker-color; 47 | transition: border-color .4s; 48 | } 49 | .find-result .region.region.region { 50 | border: 2px solid transparent; 51 | } 52 | .current-result .region.region.region { 53 | border: 2px solid @syntax-result-marker-color-selected; 54 | transition-duration: .1s; 55 | } 56 | 57 | .gutter { 58 | 59 | .line-number { 60 | color: @syntax-gutter-text-color; 61 | -webkit-font-smoothing: antialiased; 62 | 63 | &.git-line-removed:before { 64 | bottom: -3px; 65 | } 66 | &.git-line-removed:after { 67 | content: ""; 68 | position: absolute; 69 | left: 0px; 70 | bottom: 0px; 71 | width: 25px; 72 | border-bottom: 1px dotted fade(@syntax-color-removed, 50%); 73 | pointer-events: none; 74 | } 75 | 76 | &.cursor-line { 77 | color: @syntax-gutter-text-color-selected; 78 | background-color: @syntax-gutter-background-color-selected; 79 | } 80 | 81 | &.cursor-line-no-selection { 82 | background-color: transparent; 83 | } 84 | 85 | .icon-right { 86 | color: @syntax-text-color; 87 | } 88 | } 89 | } 90 | 91 | .gutter .line-number.folded, 92 | .gutter .line-number:after, 93 | .fold-marker:after { 94 | color: @syntax-gutter-text-color-selected; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /styles/languages/_base.less: -------------------------------------------------------------------------------- 1 | // Language syntax highlighting 2 | 3 | // Mixins ----------------------------------- 4 | .punctuation-mixin() { 5 | .syntax--punctuation, 6 | .syntax--bracket, 7 | .syntax--brace { 8 | .uno-5(); 9 | } 10 | .syntax--string .syntax--punctuation { 11 | .duo-3(); 12 | } 13 | } 14 | 15 | // Default color ----------------------------------- 16 | // Will be used by all languages when no other scope is defined. 17 | .syntax--source { 18 | .uno-2(); 19 | } 20 | 21 | // Uno hue ----------------------------------- 22 | 23 | .syntax--html.syntax--elements, 24 | .syntax--entity, 25 | .syntax--tag, 26 | .syntax--function-call { 27 | .uno-1(); 28 | } 29 | 30 | .syntax--attribute-name, 31 | .syntax--character.syntax--escape { 32 | .uno-3(); 33 | } 34 | 35 | .syntax--support { 36 | .uno-4(); 37 | } 38 | 39 | // Uno hue ----------------------------------- 40 | 41 | .syntax--variable { 42 | .uno-3(); 43 | } 44 | 45 | // Duo hue ----------------------------------- 46 | .syntax--string, 47 | .syntax--constant, 48 | .syntax--storage.syntax--type { 49 | .duo-1(); 50 | } 51 | 52 | .syntax--keyword, 53 | .syntax--storage { 54 | .duo-2(); 55 | } 56 | 57 | 58 | // Punctuation ----------------------------------- 59 | .punctuation-mixin(); 60 | 61 | 62 | // Comments ----------------------------------- 63 | .syntax--comment { 64 | .uno-4(); 65 | font-style: italic; 66 | } 67 | 68 | 69 | // Text styles ----------------------------------- 70 | .syntax--bold { font-weight: bold; } 71 | .syntax--italic { font-style: italic; } 72 | -------------------------------------------------------------------------------- /styles/languages/_index.less: -------------------------------------------------------------------------------- 1 | 2 | // Base 3 | @import '_base'; 4 | 5 | // All languages 6 | @import 'c'; 7 | @import 'clojure'; 8 | @import 'coffee'; 9 | @import 'cs'; 10 | @import 'css'; 11 | @import 'gfm'; 12 | @import 'haskell'; 13 | @import 'html'; 14 | @import 'jade'; 15 | @import 'java'; 16 | @import 'javascript'; 17 | @import 'json'; 18 | @import 'less'; 19 | @import 'mediawiki'; 20 | @import 'php'; 21 | @import 'python'; 22 | @import 'sass'; 23 | @import 'scss'; 24 | @import 'slim'; 25 | @import 'stylus'; 26 | @import 'tex'; 27 | @import 'text'; 28 | @import 'yaml'; 29 | -------------------------------------------------------------------------------- /styles/languages/c.less: -------------------------------------------------------------------------------- 1 | .syntax--c { 2 | .syntax--parens, 3 | .syntax--block { 4 | .uno-2(); 5 | .punctuation-mixin(); 6 | } 7 | .syntax--comment { 8 | .duo-3(); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /styles/languages/clojure.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--clojure { 2 | .syntax--expression { 3 | .duo-1(); 4 | .syntax--punctuation { 5 | .uno-5(); 6 | } 7 | } 8 | .syntax--symbol { 9 | .uno-2(); 10 | } 11 | .syntax--vector { 12 | .uno-4(); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /styles/languages/coffee.less: -------------------------------------------------------------------------------- 1 | // Coffee 2 | 3 | .syntax--coffee { 4 | &.syntax--source { 5 | .uno-4(); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/languages/cs.less: -------------------------------------------------------------------------------- 1 | .syntax--source.syntax--cs { 2 | .syntax--meta { 3 | .uno-4(); 4 | } 5 | .syntax--method { 6 | .uno-2(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /styles/languages/css.less: -------------------------------------------------------------------------------- 1 | // CSS 2 | 3 | .syntax--css { 4 | &.syntax--source { 5 | .uno-5(); 6 | } 7 | &.syntax--support.syntax--property-name { 8 | .uno-3(); 9 | } 10 | &.syntax--attribute-name { 11 | &.syntax--id, 12 | &.syntax--class, 13 | &.syntax--parent-selector { 14 | .uno-1(); 15 | } 16 | } 17 | &.syntax--unit { 18 | .duo-2(); 19 | } 20 | &.syntax--function { 21 | .duo-3(); 22 | } 23 | &.syntax--punctuation.syntax--terminator { 24 | .duo-3(); 25 | } 26 | &.syntax--at-rule { 27 | .uno-1(); 28 | .syntax--keyword.syntax--punctuation { 29 | color: inherit; 30 | } 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /styles/languages/gfm.less: -------------------------------------------------------------------------------- 1 | // GF MarkDown 2 | 3 | .syntax--gfm { 4 | .uno-1(); 5 | .punctuation-mixin(); 6 | 7 | .syntax--link { 8 | .uno-2(); 9 | } 10 | 11 | &.syntax--markup { 12 | .uno-2(); 13 | 14 | &.syntax--bold { .syntax--bold(); } 15 | &.syntax--italic { .syntax--italic(); } 16 | &.syntax--strike { 17 | .uno-5(); 18 | text-decoration: line-through; 19 | } 20 | 21 | &.syntax--raw { 22 | .duo-1(); // Fenced code blocks 23 | } 24 | 25 | &.syntax--raw .syntax--support, 26 | &.syntax--code .syntax--support { 27 | .uno-4(); // Fenced code blocks 28 | } 29 | } 30 | 31 | &.syntax--comment { 32 | .uno-4(); 33 | &.syntax--quote { 34 | .uno-2(); 35 | } 36 | } 37 | 38 | &.syntax--table { 39 | .duo-1(); 40 | 41 | .syntax--border, 42 | .syntax--pipe { 43 | .uno-5(); 44 | } 45 | } 46 | 47 | &.syntax--variable, 48 | &.syntax--entity { 49 | .duo-1(); 50 | } 51 | &.syntax--support { .duo-2(); } 52 | 53 | &.syntax--heading-1, 54 | &.syntax--heading-2, 55 | &.syntax--heading-3 { 56 | .duo-1(); 57 | } 58 | &.syntax--heading-4, 59 | &.syntax--heading-5, 60 | &.syntax--heading-6 { 61 | .duo-2(); 62 | } 63 | 64 | } 65 | -------------------------------------------------------------------------------- /styles/languages/haskell.less: -------------------------------------------------------------------------------- 1 | .syntax--haskell { 2 | &.syntax--source { 3 | .uno-2(); 4 | .punctuation-mixin(); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /styles/languages/html.less: -------------------------------------------------------------------------------- 1 | // HTML 2 | 3 | .syntax--html { 4 | &.syntax--meta { 5 | .uno-5(); 6 | } 7 | 8 | &.syntax--embedded .syntax--meta, 9 | &.syntax--doctype, 10 | &.syntax--text { 11 | .uno-4(); 12 | } 13 | 14 | .syntax--string .syntax--id { 15 | .duo-1(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/languages/jade.less: -------------------------------------------------------------------------------- 1 | // Jade 2 | 3 | .syntax--jade { 4 | 5 | &.syntax--text, 6 | .syntax--constant.syntax--name.syntax--attribute.syntax--tag { 7 | .uno-4(); 8 | } 9 | 10 | .syntax--meta.syntax--control.syntax--flow { 11 | .uno-2(); 12 | } 13 | 14 | .syntax--attribute-name.syntax--id { 15 | .duo-1(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/languages/java.less: -------------------------------------------------------------------------------- 1 | .syntax--java { 2 | .syntax--method { 3 | .uno-2(); 4 | .punctuation-mixin(); 5 | } 6 | .syntax--dereference { 7 | .uno-4(); 8 | 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /styles/languages/javascript.less: -------------------------------------------------------------------------------- 1 | .syntax--js { 2 | &.syntax--delimiter { 3 | .uno-5(); 4 | } 5 | &.syntax--source { 6 | .uno-2(); 7 | .punctuation-mixin(); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /styles/languages/json.less: -------------------------------------------------------------------------------- 1 | // JSON 2 | 3 | .syntax--json { 4 | .syntax--string { 5 | .uno-2(); 6 | .syntax--punctuation { 7 | .uno-5(); 8 | } 9 | } 10 | .syntax--value { 11 | & > .syntax--string { 12 | .duo-1(); 13 | .syntax--punctuation { 14 | .uno-5(); 15 | } 16 | } 17 | .syntax--constant { 18 | .duo-2(); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/languages/less.less: -------------------------------------------------------------------------------- 1 | // Less 2 | 3 | .syntax--less { 4 | &.syntax--variable:first-child { 5 | .uno-2(); // stronger variable color when declaring 6 | } 7 | .syntax--mixin { 8 | .duo-2(); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /styles/languages/mediawiki.less: -------------------------------------------------------------------------------- 1 | .syntax--mediawiki { 2 | .uno-1(); 3 | .punctuation-mixin(); 4 | .syntax--wiki-link { 5 | .uno-2(); 6 | } 7 | .syntax--heading { 8 | .duo-1(); 9 | } 10 | .syntax--function-call { 11 | .duo-2(); 12 | } 13 | .syntax--value { 14 | .duo-1(); 15 | } 16 | .syntax--fix_this_later { 17 | .uno-2(); 18 | } 19 | .syntax--pipe, 20 | .syntax--link, 21 | .syntax--tag { 22 | .uno-5(); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /styles/languages/php.less: -------------------------------------------------------------------------------- 1 | // PHP 2 | 3 | .syntax--php { 4 | .syntax--string-contents { 5 | .duo-1(); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/languages/python.less: -------------------------------------------------------------------------------- 1 | // Python 2 | -------------------------------------------------------------------------------- /styles/languages/sass.less: -------------------------------------------------------------------------------- 1 | // SASS 2 | 3 | .syntax--sass { 4 | .syntax--at-rule .syntax--at-rule { 5 | &, 6 | > .syntax--punctuation{ 7 | .uno-1(); 8 | } 9 | } 10 | .syntax--mixin + .syntax--function, 11 | .syntax--include + .syntax--function { 12 | .duo-2(); 13 | } 14 | &.syntax--property-value { 15 | .duo-1(); 16 | .syntax--function { 17 | .uno-2(); 18 | } 19 | .syntax--punctuation { 20 | .uno-5(); 21 | } 22 | } 23 | &.syntax--variable.syntax--parameter.syntax--url { 24 | .duo-1(); 25 | } 26 | &.syntax--class, 27 | &.syntax--parent-selector-suffix { 28 | .uno-1(); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /styles/languages/scss.less: -------------------------------------------------------------------------------- 1 | // SCSS 2 | 3 | .syntax--scss { 4 | .syntax--at-rule .syntax--at-rule { 5 | &, 6 | > .syntax--punctuation{ 7 | .uno-1(); 8 | } 9 | } 10 | .syntax--mixin + .syntax--function, 11 | .syntax--include + .syntax--function { 12 | .duo-2(); 13 | } 14 | &.syntax--property-value { 15 | .duo-1(); 16 | .syntax--function { 17 | .uno-2(); 18 | } 19 | .syntax--punctuation { 20 | .uno-5(); 21 | } 22 | } 23 | &.syntax--variable.syntax--parameter.syntax--url { 24 | .duo-1(); 25 | } 26 | &.syntax--class, 27 | &.syntax--parent-selector-suffix { 28 | .uno-1(); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /styles/languages/slim.less: -------------------------------------------------------------------------------- 1 | // SLIM 2 | 3 | .syntax--slim { 4 | &.syntax--meta { 5 | .uno-5(); 6 | } 7 | &.syntax--text { 8 | .uno-4(); 9 | } 10 | .syntax--string .syntax--id { 11 | .duo-1(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/languages/stylus.less: -------------------------------------------------------------------------------- 1 | .syntax--stylus { 2 | .syntax--function .syntax--name { 3 | .duo-2(); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /styles/languages/tex.less: -------------------------------------------------------------------------------- 1 | .syntax--tex { 2 | .syntax--other { 3 | .duo-2(); 4 | } 5 | .syntax--reference { 6 | .uno-2(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /styles/languages/text.less: -------------------------------------------------------------------------------- 1 | // Text 2 | 3 | .syntax--plain .syntax--text { 4 | .uno-1(); 5 | } 6 | -------------------------------------------------------------------------------- /styles/languages/yaml.less: -------------------------------------------------------------------------------- 1 | // YAML 2 | 3 | .syntax--yaml { 4 | .syntax--tag { 5 | .uno-2(); 6 | } 7 | .syntax--constant { 8 | .duo-2(); 9 | } 10 | .syntax--punctuation { 11 | .uno-5(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/palette.less: -------------------------------------------------------------------------------- 1 | 2 | // DuoTone palette 3 | 4 | .uno-1 { color: @uno-1; } // ..... Strong 5 | .uno-2 { color: @uno-2; } // .... | 6 | .uno-3 { color: @uno-3; } // ... | 7 | .uno-4 { color: @uno-4; } // .. | 8 | .uno-5 { color: @uno-5; } // . Weak 9 | 10 | .duo-1 { color: @duo-1; } // .... Strong 11 | .duo-2 { color: @duo-2; } // ... | 12 | .duo-3 { color: @duo-3; } // . Weak 13 | -------------------------------------------------------------------------------- /styles/syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | 4 | // Official Syntax Variables ----------------------------------- 5 | 6 | // General colors 7 | @syntax-text-color: @syntax-fg; 8 | @syntax-cursor-color: @syntax-accent; 9 | @syntax-selection-color: @syntax-selection; 10 | @syntax-selection-flash-color: @syntax-accent; 11 | @syntax-background-color: @syntax-bg; 12 | 13 | // Guide colors 14 | @syntax-wrap-guide-color: @syntax-guide; 15 | @syntax-indent-guide-color: @syntax-guide; 16 | @syntax-invisible-character-color: @syntax-guide; 17 | 18 | // For find and replace markers 19 | @syntax-result-marker-color: fade(@syntax-accent, 16%); 20 | @syntax-result-marker-color-selected: @syntax-accent; 21 | 22 | // Gutter colors 23 | @syntax-gutter-text-color: @uno-4; 24 | @syntax-gutter-text-color-selected: @uno-2; 25 | @syntax-gutter-background-color: transparent; 26 | @syntax-gutter-background-color-selected: @syntax-selection-gutter; 27 | 28 | // For git diff info. i.e. in the gutter 29 | @syntax-color-renamed: hsl(208, 100%, 60%); 30 | @syntax-color-added: hsl(150, 60%, 54%); 31 | @syntax-color-modified: hsl(40, 60%, 70%); 32 | @syntax-color-removed: hsl(0, 70%, 60%); 33 | 34 | // For language entity colors 35 | @syntax-color-variable: @uno-2; 36 | @syntax-color-constant: @duo-1; 37 | @syntax-color-property: @uno-3; 38 | @syntax-color-value: @duo-1; 39 | @syntax-color-function: @duo-1; 40 | @syntax-color-method: @duo-1; 41 | @syntax-color-class: @duo-1; 42 | @syntax-color-keyword: @duo-2; 43 | @syntax-color-tag: @uno-1; 44 | @syntax-color-attribute:@uno-2; 45 | @syntax-color-import: @duo-2; 46 | @syntax-color-snippet: @duo-2; 47 | --------------------------------------------------------------------------------