atom settings

settings.md

UI-THEME: Atom Dark Syntax Theme: Base16 Tomorrow Dark

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
// .tree-view {
  // background-color: whitesmoke;
// }

// style the background and foreground colors on the atom-text-editor-element itself
// atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
// }

// To style other content in the text editor's shadow DOM, use the ::shadow expression
// atom-text-editor::shadow .cursor {
  // border-color: red;
// }


// ==== Ligature fonts for atom
// JM 12/14/2016
// Reference (original): https://medium.com/@docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e#.nm9fchwv1
// Reference (improved): https://gist.github.com/MattMcFarland/e41ef709b1d82adea800563a86805559#gistcomment-1835618
// @size16: 16px;
// @size24: 24px;
// @stringUnquotedColor: #CDD3DE;
// atom-text-editor {
//   font-family: 'Fira Code';
//   font-style: normal;
//   text-rendering: optimizeLegibility;
//   // letter-spacing: 1.45px;
//
//   &::shadow {
//     .string.quoted,
//     .string.regexp {
//       -webkit-font-feature-settings: "liga" off, "calt" off;
//     }
//     .source.js.jsx > .keyword.control.flow.js,
//     .storage, .type .function {
//       vertical-align: baseline;
//       font-family: 'flottflott';
//       height: inherit;
//       font-size: @size24;
//       line-height: @size16;
//     }
//     .source.js.jsx,
//     .storage.type.function.arrow.js,
//     .indent-guide,
//     .variable {
//       font-family: 'Fira Code';
//       font-style: normal;
//       font-size: @size16;
//       line-height: @size24;
//     }
//     .string.unquoted.js {
//       color: @stringUnquotedColor;
//     }
//     .entity.name {
//       font-weight: 500;
//     }
//   }
// }

// ==== Operator Mono font styles
// Originally referenced here: https://gist.github.com/brandondurham/3828ac42766f9f187c8e
atom {
  &-workspace,
  &-text-editor {
     font-family: 'Operator Mono';
     font-size: 16px;
     font-weight: 500;
     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--type.syntax--function.syntax--arrow.syntax--js,
      // `===`, `!==`, etc. | Operators
      .syntax--operator.syntax--comparison.syntax--js {
        font-family: 'Fira Code';
        font-style: normal;
        font-size: 15px;
        line-height: 1.7;
      }
    }
  }
  // left pane / tree view
  &-panel.tool-panel {
    font-size: 0.88em;
  }
}