Operator Mono Collection & Styling for Atom Text Editor (Operator Mono/Pro/ScreenSmart)

style.css

/* CSS for VS Code */
/* 
  Feel free to remove these comments - just documenting why we do what we do...
*/

/* This is the left-hand pane or "tree-view" */
.monaco-split-view,
/* These are for any `.js` or `.jsx` files */
.editor-container[data-mode-id~="javascript"],
.editor-container[data-mode-id~="javascriptreact"] {
  font-family: "Operator Mono";
  font-weight: 400;
  /* Make `font-size` to your liking but be sure
    to edit `line-height` if increasing above `17px` or `18px` */
  font-size: 16px;
  line-height: 1.7;
}

.editor-container[data-mode-id~="javascript"] .entity.other.attribute-name,
.editor-container[data-mode-id~="javascriptreact"] .entity.other.attribute-name {
  font-style: italic;
}

style.less

// ==== Operator Mono font for Atom Text Editor
// Originally referenced here: https://gist.github.com/brandondurham/3828ac42766f9f187c8e
atom {
  &-workspace,
  &-text-editor {
     font-family: 'Operator Mono';
     font-size: 16px;
     font-weight: 400;
     line-height: 1.7;
     text-rendering: optimizeLegibility;
  }
  &-text-editor {
    &,
    &::shadow {
      // Commented out code
      .comment,
      // <Button `className`
      .entity.other.attribute-name,
      // console.log(...)
      .syntax--support.syntax--console.syntax--js,
      // let/const
      // .syntax--storage.syntax--type.syntax--js:not(.syntax--extends),
      // `this`
      .syntax--this.syntax--js,
      // `switch (Word)` or `case` or `default`
      .syntax--control.syntax--switch.syntax--js,
      // function () {...}
      .syntax--storage.syntax--type.syntax--function.syntax--js,
      // `extends` but NOT `default` -> extends default
      // Assumes that `extends` is always followed by `default`
      .syntax--keyword.syntax--control.syntax--module.syntax--js:nth-child(1),
      // `class` class Home extends Component {...}
      .syntax--storage.syntax--type.syntax--class.syntax--js {
        font-style: italic;
      }
    }
    // `null`
    .syntax--null.syntax--js,
    // `undefined`
    .syntax--undefined.syntax--js {
      font-weight: 500;
    }
    // CSS
    .syntax--entity.syntax--other.syntax--attribute-name.syntax--class.syntax--css,
    .syntax--entity.syntax--other.syntax--attribute-name.syntax--pseudo-element.syntax--css,
    .syntax--entity.syntax--other.syntax--attribute-name.syntax--parent-selector.syntax--css {
      font-style: normal;
    }
    &::shadow {
      // class `Home` extends `Blah`
      .entity.name {
        font-weight: 500;
      }
      .string.quoted,
      .string.regexp {
        -webkit-font-feature-settings: "liga" off, "calt" off;
      }
      .string.unquoted.js {
        color: #CDD3DE;
      }
      // `=>` | Arrow functions
      .syntax--function.syntax--arrow.syntax--js,
      // `===`, `!==`, etc. | Operators
      .syntax--operator.syntax--comparison.syntax--js {
        font-family: 'Fira Code';
        font-style: normal;
        font-size: 16px;
        line-height: 1.7;
      }
    }
  }
  // left pane / tree view
  &-panel.tool-panel {
    font-size: 0.88em;
  }
}