Atom stylesheet based around Solarized Dark, Input Mono, and Input Sans Narrow

styles.less

/*
   I should probably have turned this into a theme…,
   but who has time for that?


   Installation:
   1. Choose "Atom Dark" as your UI theme.
   2. Choose "Solarized Dark" as your syntax theme.
   3. Install Input from http://input.fontbureau.com/
      (It's free for personal use.)
   4. Set Input Mono as your font in Atom preferences.
      (14 is my favourite size for it.)
   5. Stick the contents of this file into your Atom stylesheet.
*/

//
// Colors
// http://ethanschoonover.com/solarized

//  SOLARIZED HEX      // 16/8 TERMCOL  XTERM/HEX   L*A*B      RGB         HSB
//  --------- -------  // ---- -------  ----------- ---------- ----------- -----------
   @base03  : #002b36; //  8/4 brblack  234 #1c1c1c 15 -12 -12   0  43  54 193 100  21
   @base02  : #073642; //  0/4 black    235 #262626 20 -12 -12   7  54  66 192  90  26
   @base01  : #586e75; // 10/7 brgreen  240 #585858 45 -07 -07  88 110 117 194  25  46
   @base00  : #657b83; // 11/7 bryellow 241 #626262 50 -07 -07 101 123 131 195  23  51
   @base0   : #839496; // 12/6 brblue   244 #808080 60 -06 -03 131 148 150 186  13  59
   @base1   : #93a1a1; // 14/4 brcyan   245 #8a8a8a 65 -05 -02 147 161 161 180   9  63
   @base2   : #eee8d5; //  7/7 white    254 #e4e4e4 92 -00  10 238 232 213  44  11  93
   @base3   : #fdf6e3; // 15/7 brwhite  230 #ffffd7 97  00  10 253 246 227  44  10  99
   @yellow  : #b58900; //  3/3 yellow   136 #af8700 60  10  65 181 137   0  45 100  71
   @orange  : #cb4b16; //  9/3 brred    166 #d75f00 50  50  55 203  75  22  18  89  80
   @red     : #dc322f; //  1/1 red      160 #d70000 50  65  45 220  50  47   1  79  86
   @magenta : #d33682; //  5/5 magenta  125 #af005f 50  65 -05 211  54 130 331  74  83
   @violet  : #6c71c4; // 13/5 brmagenta 61 #5f5faf 50  15 -45 108 113 196 237  45  77
   @blue    : #268bd2; //  4/4 blue      33 #0087ff 55 -10 -45  38 139 210 205  82  82
   @cyan    : #2aa198; //  6/6 cyan      37 #00afaf 60 -35 -05  42 161 152 175  74  63
   @green   : #859900; //  2/2 green     64 #5f8700 60 -20  65 133 153   0  68 100  60

//
// Fonts
// http://input.fontbureau.com/

@ui-font: "Input Sans Narrow";

.tab {
  font-family: @ui-font;
  font-size: 12px !important;
}

.status-bar,
.tool-panel {
  font-family: @ui-font;

  .flexbox-repaint-hack {
    padding: 0 10px;
  }
}

.editor {
  font-weight: 400;
}

//
// Tab bar modifications
// Light Table-esque styling

.tab-bar {
  background: @base02;
  border-bottom: none;
  padding: 5px 0 5px;
  height: auto;
  border-bottom: none;
  box-shadow: none;

  &:after {
    display: none;
  }
}

.tab-bar .tab {
  background: @base02;
  padding: 2px 10px 3px !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: #586e75;

  .close-icon {
    right: 10px !important;
    top: 0;
    line-height: 26px !important;
  }
}

// Curved tab edges turned off
.tab-bar .tab:before, .tab-bar .tab:after {
  display: none !important;
}

.tab-bar .tab.active,
.tab-bar .tab.active:before,
.tab-bar .tab.active:after {
  background: @base03;
  color: #eee8d5;
  height: 26px;
  line-height: 25px;
}

//
// File tree modifications

.panes {
  padding-left: 10px;
  background: @base02;
}

.tool-panel.panel-left {
  border-right: none;
}

.tree-view-resizer {

}

.tree-view-scroller,
.tree-view {
  background: @base02 !important;
}

.tree-view {
  font-family: @ui-font;
  background: transparent;
  font-size: 12px;
  box-shadow: none;
  padding: 10px;

  .list-item {
    line-height: 1.8 !important;

    .name { color: @base0; }
  }

  .selected {
    & > .header .name,
    & > .name {
      color: @base2;
    }

    &:before {
      height: 1.6em !important;
    }
  }

  // Force icons to inherit status colors properly
  .entry > .header .name.icon:before,
  .entry > .name.icon:before {
    color: inherit !important;
  }

  // Modified status
  .entry.status-modified {
    & > .header:before,
    & > .header .name,
    & > .name {
      color: @orange;
    }
  }

  .selected.entry.status-modified > .header:before,
  .selected.entry.status-modified > .header .name,
  .selected.entry.status-modified > .name {
    color: lighten(@orange, 14.6%) !important;
  }

  // Added status
  .entry.status-added {
    & > .header:before,
    & > .header .name,
    & > .name {
      color: @green;
    }
  }

  .selected.entry.status-added > .header:before,
  .selected.entry.status-added > .header .name,
  .selected.entry.status-added > .name {
    color: lighten(@green, 9%) !important;
  }

  // Ignored status
  .entry.status-ignored {
    & > .header:before,
    & > .header .name,
    & > .name {
      color: @base00;
    }
  }

  .selected.entry.status-ignored > .header:before,
  .selected.entry.status-ignored > .header .name,
  .selected.entry.status-ignored > .name {
    color: lighten(@base00, 14.6%) !important;
  }

  // Removed status (I don't think this is actually used)
  .entry.status-removed {
    & > .header:before,
    & > .header .name,
    & > .name {
      color: @red;
    }
  }

  .selected.entry.status-removed > .header:before,
  .selected.entry.status-removed > .header .name,
  .selected.entry.status-removed > .name {
    color: lighten(@red, 9%) !important;
  }

  // Renamed status (I don't think this is actually used)
  .entry.status-renamed {
    & > .header:before,
    & > .header .name,
    & > .name {
      color: @cyan;
    }
  }

  .selected.entry.status-renamed > .header:before,
  .selected.entry.status-renamed > .header .name,
  .selected.entry.status-renamed > .name {
    color: lighten(@cyan, 9%) !important;
  }

  .icon:before {
    font-size: 14px;
    opacity: .854;
    top: 0;
    margin-right: 0.1em;
  }

  .header:before {
    margin-right: 0 !important;
  }
}

//
// Status bar modifications

.tool-panel.status-bar {
  border: none;
  box-shadow: none;

  a {
    color: @base0;
  }

  .text-error {
    color: @red;
  }

  .status-bar-right,
  .status-bar-left {
    padding-top: 3px;
  }
}

.pull-right {
  float: right;
}

//
// Find/search bar modifications

.tool-panel.panel-bottom {
  background: @base02;
  box-shadow: none;
  border: none;
  color: @base00;
}

//
// Overlays

.overlay {
  background: @base02;
  border: none;
  box-shadow: none;
  outline: 5px solid fade(darken(@base03, 3.4%), 61.8%);
  border-radius: 0;
}

//
// Form elements etc. in panels and overlays

.tool-panel.panel-bottom,
.overlay {

  // Lists
  .list-group {
    li {
      background: @base03;
      color: @base0;
      border-color: darken(@base03, 3.4%) !important;
    }
  }

  .key-binding {
    border: none;
    background: mix(@blue, @base02, 14.6%);
    color: @base1;
    border: none;
    box-shadow: none;
  }

  // Faded bits of text
  .subtle-info-message,
  .options-label,
  .placeholder-text {
    color: @base00 !important;
  }

  // Bright bits of text
  .highlight,
  .options-label .options {
    color: @base1;
  }

  // Textfields
  .editor.mini {
    color: @base2;
    background: @base03;
    padding-top: 1px;

    &.is-focused { background: darken(@base03, 1.4%); }
  }

  // Buttons
  .btn {
    border-color: @base02;
    background: mix(@blue, @base02, 14.6%);
    color: @base1;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1px;

    &:hover,
    &:focus {
      background: mix(@blue, @base02, 50%);
      color: @base2;
    }

    &:active {
      background: mix(@blue, @base02, 9.6%);
      color: @base1;
    }
  }

  // Fixes extra gap in 3-button groups
  .btn + .btn + .btn { border-left: 0; }
}

//
// Misc styling changes
// Everything else

// Cursor color and thickness
.editor .cursor {
  border-color: saturate( lighten(@magenta, 9%), 14.6%);
  border-width: 2px;
}

// Gap on the right side of editor
.item-views {
  border-right: 10px solid @base02;
}

// Remove borders between splits
.panes .pane-row > *,
.panes .pane-column > * {
  border: none;
}

// The lines that help you match indent levels
.editor .indent-guide {
  box-shadow: inset 1px 0 0 fade(@base3, 5.6%);

  // Hide leftmost guide, since it's useless
  &:first-of-type { box-shadow: none; }
}

// Highlighting for matching start & end brackets
.bracket-matcher.highlight {
  opacity: 1;
}

.bracket-matcher .region {
  background-color: @blue;
  border-bottom: 1px solid @blue;
  -webkit-animation: 0.414s blinkOpacity ease alternate infinite;
}

@-webkit-keyframes blinkOpacity {
  from { opacity: 0.618; }
  to { opacity: 0.146; }
}

// The column that contains line numbers
.editor .gutter {
  background: darken(@base03, 1.4%);
  color: @base01;
}

// Highlighted line
.line.cursor-line,
.editor .line-number.cursor-line-no-selection {
  background: fade(#000, 23.6%);
}

// Highlighted line number
.editor .line-number.cursor-line {
  //color: @base0;
}

// Selection colors
.editor .selection .region {
  background: fade(@base00, 38.2%);
}

// More color/font overrides
.workspace,
.panes .pane,
.focusable-panel {
  background: @base02 !important;
  font-family: @ui-font;
}

.panel-heading {
  color: @base2;
  border: none;
  background: @base03;
}

.highlight-info {
  background: @blue;
  color: @base3;
}

.bright {
  color: @base2;
}

.preview-pane .results-view .path-match-number,
.text-subtle {
  color: @base00;
}

.path-name {
  color: @cyan;
}

.list-group li:not(.list-nested-item),
.list-tree li:not(.list-nested-item),
.list-group li.list-nested-item > .list-item,
.list-tree li.list-nested-item > .list-item {
  color: @base1;
}

//
// Selections :befores

.list-group .selected:before,
.list-tree .selected:before,
.select-list .selected {
  color: @base3 !important;
  background: mix(@blue, @base02, 38.2%) !important;
  box-shadow: none !important;
}

Here's a screenshot:

Looks great. Have you considered Input Sans Condensed in split screen mode? https://gist.github.com/eins78/a8dde1eb0d10963a65e7 ... I've found that pretty helpful.

@tbrown Sounds like a good idea!

Updated with some small visual improvements and styling for select lists (the command palette, etc.).