atom style

style.less

atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-weight: 500;
}

atom-text-editor {
  /*
    Turn off legibility in comments, regexp and quotes
  */
  .syntax--comment,
  .syntax--string.syntax--quoted,
  .syntax--string.syntax--regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }

  /*
    Transform selected text into flottflott for elegant touch:
    - this
    - html attributes
  */
  .syntax--variable.syntax--language.syntax--this,
  .syntax--html > .syntax--entity.syntax--other.syntax--attribute-name,
  .syntax--JSXAttrs > .syntax--entity.syntax--other.syntax--attribute-name {
    // flottflott is italic in itself, don't let atom make it italic
    font-style: normal !important;
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 140%;
    line-height: 100%;
  }

  /*
    Replace function() with ƒ()
    - not(.syntax--arrow) is for not touching the => () functions
  */
  // .syntax--storage.syntax--type.syntax--function.syntax--js:not(.syntax--arrow) {
  //   visibility: hidden;
  // }
  // .syntax--storage.syntax--type.syntax--function.syntax--js:not(.syntax--arrow)::after {
  //   visibility: visible;
  //   content: 'ƒ';
  //   margin-left: -76px;
  // }

  /*
    Fix for Oceanic Next Italic for rendering full @ruby instance variables in expected color and a bit thicker
    Also fixes es6 methods to not render in expected color
  */
  .syntax--entity.syntax--name.syntax--method.syntax--js,
  .syntax--variable.syntax--other.syntax--readwrite.syntax--instance.syntax--ruby {
    color: #6699CC;
    // color: #268bd2;
    // color: #5FB3B3;
    font-weight: 500;
  }

  /*
    Fix for Oceanic Next Italic for rendering the full CONSTANT variable in expected color
  */
  .syntax--variable.syntax--other.syntax--constant.syntax--ruby {
    color: #FAC863;
  }

  /*
    Make entity names bold, except mustache {{.syntax--.syntax--.syntax--}} operators in hbs files
  */
  .syntax--entity.syntax--name {
    font-weight: bold;
    &.syntax--mustache {
      font-weight: normal;
    }
  }
}