Merge remote-tracking branch 'origin/master'

24 files changed, 1302 insertions, 0 deletions

diff --git a/atom/packages/aesthetic-ui/CONTRIBUTING.md b/atom/packages/aesthetic-ui/CONTRIBUTING.md
new file mode 100644
index 0000000..0fd0ad6
--- /dev/null
+++ b/atom/packages/aesthetic-ui/CONTRIBUTING.md
@@ -0,0 +1 @@
+See the [Atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md)
diff --git a/atom/packages/aesthetic-ui/LICENSE.md b/atom/packages/aesthetic-ui/LICENSE.md
new file mode 100644
index 0000000..4d231b4
--- /dev/null
+++ b/atom/packages/aesthetic-ui/LICENSE.md
@@ -0,0 +1,20 @@
+Copyright (c) 2014 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/atom/packages/aesthetic-ui/README.md b/atom/packages/aesthetic-ui/README.md
new file mode 100644
index 0000000..a75a275
--- /dev/null
+++ b/atom/packages/aesthetic-ui/README.md
@@ -0,0 +1,18 @@
+# ａｅｓｔｈｅｔｉｃ－ｕｉ
+
+Ａｎ　[ａｅｓｔｈｅｔｉｃ](http://knowyourmeme.com/memes/aesthetic)　ＵＩ　ｔｈｅｍｅ　ｆｏｒ　Ａｔｏｍ　ｔｅｘｔ　ｅｄｉｔｏｒ．　Ｃｏｎｔｒｉｂｕｔｉｏｎｓ　ｗｅｌｃｏｍｅ！
+
+## Ｎｅｗ　ｉｎ　ｖｅｒｓｉｏｎ　２．０．０
+
+Ｍｏｒｅ　ｃｏｍｐａｃｔ　ａｎｄ　ａｅｓｔｈｅｔｉｃ　ｔｒｅｅ　ｖｉｅｗ！<br>[Ｃｏｎｔｒｉｂｕｔｅｄ　ｂｙ　＠ａｂｅｊｆｅｈｒ．](https://github.com/dtinth/atom-aesthetic-ui/pull/4)　Ｔｈａｎｋｓ！
+
+![Ｓｃｒｅｅｎｓｈｏｔ](http://i.imgur.com/455A2im.png)
+
+
+## Ｓｃｒｅｅｎｓｈｏｔｓ
+
+![Ｓｅｔｔｉｎｇｓ　ｖｉｅｗ　＆　ｍｏｄａｌｓ](http://i.imgur.com/MjX2xqw.png)
+
+![Ｔｅｘｔ　ｅｄｉｔｏｒ　＆　ｔｒｅｅ　ｖｉｅｗ](http://i.imgur.com/zHObmye.png)
+
+Ｎｏｔｅ：　Ｕｓｉｎｇ　[Ｒｅｄｍｏｎｄ](https://atom.io/themes/redmond-syntax)　ｓｙｎｔａｘ　ｔｈｅｍｅ．
diff --git a/atom/packages/aesthetic-ui/index.less b/atom/packages/aesthetic-ui/index.less
new file mode 100644
index 0000000..8dedb4f
--- /dev/null
+++ b/atom/packages/aesthetic-ui/index.less
@@ -0,0 +1,17 @@
+@import "styles/atom";
+@import "styles/utilities";
+@import "styles/text";
+@import "styles/git";
+@import "styles/sites";
+@import "styles/messages";
+@import "styles/progress";
+@import "styles/buttons";
+@import "styles/panels";
+@import "styles/panes";
+@import "styles/lists";
+@import "styles/overlays";
+@import "styles/editor";
+@import "styles/tabs";
+@import "styles/tooltips";
+@import "styles/tree-view";
+@import "styles/settings";
diff --git a/atom/packages/aesthetic-ui/package.json b/atom/packages/aesthetic-ui/package.json
new file mode 100644
index 0000000..25ea67d
--- /dev/null
+++ b/atom/packages/aesthetic-ui/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "aesthetic-ui",
+  "theme": "ui",
+  "version": "2.0.0",
+  "description": "Ａｎ　ＡＥＳＴＨＥＴＩＣ　ＵＩ　tｈｅｍｅ　ｆｏｒ　Ａｔｏｍ",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dtinth/atom-aesthetic-ui.git"
+  },
+  "license": "MIT",
+  "engines": {
+    "atom": ">0.50.0"
+  },
+  "readme": "# ａｅｓｔｈｅｔｉｃ－ｕｉ\n\nＡｎ　[ａｅｓｔｈｅｔｉｃ](http://knowyourmeme.com/memes/aesthetic)　ＵＩ　ｔｈｅｍｅ　ｆｏｒ　Ａｔｏｍ　ｔｅｘｔ　ｅｄｉｔｏｒ．　Ｃｏｎｔｒｉｂｕｔｉｏｎｓ　ｗｅｌｃｏｍｅ！\n\n## Ｎｅｗ　ｉｎ　ｖｅｒｓｉｏｎ　２．０．０\n\nＭｏｒｅ　ｃｏｍｐａｃｔ　ａｎｄ　ａｅｓｔｈｅｔｉｃ　ｔｒｅｅ　ｖｉｅｗ！<br>[Ｃｏｎｔｒｉｂｕｔｅｄ　ｂｙ　＠ａｂｅｊｆｅｈｒ．](https://github.com/dtinth/atom-aesthetic-ui/pull/4)　Ｔｈａｎｋｓ！\n\n![Ｓｃｒｅｅｎｓｈｏｔ](http://i.imgur.com/455A2im.png)\n\n\n## Ｓｃｒｅｅｎｓｈｏｔｓ\n\n![Ｓｅｔｔｉｎｇｓ　ｖｉｅｗ　＆　ｍｏｄａｌｓ](http://i.imgur.com/MjX2xqw.png)\n\n![Ｔｅｘｔ　ｅｄｉｔｏｒ　＆　ｔｒｅｅ　ｖｉｅｗ](http://i.imgur.com/zHObmye.png)\n\nＮｏｔｅ：　Ｕｓｉｎｇ　[Ｒｅｄｍｏｎｄ](https://atom.io/themes/redmond-syntax)　ｓｙｎｔａｘ　ｔｈｅｍｅ．\n",
+  "readmeFilename": "README.md",
+  "bugs": {
+    "url": "https://github.com/dtinth/atom-aesthetic-ui/issues"
+  },
+  "homepage": "https://github.com/dtinth/atom-aesthetic-ui#readme",
+  "_id": "aesthetic-ui@2.0.0",
+  "_shasum": "510db442ae5a706f3e9ef3c3b0548d521413ac4a",
+  "_resolved": "file:../d-116612-32540-1hcnikl/package.tgz",
+  "_from": "../d-116612-32540-1hcnikl/package.tgz",
+  "_atomModuleCache": {
+    "version": 1,
+    "dependencies": [],
+    "extensions": {
+      ".json": [
+        "package.json"
+      ]
+    },
+    "folders": []
+  }
+}
\ No newline at end of file
diff --git a/atom/packages/aesthetic-ui/styles/atom.less b/atom/packages/aesthetic-ui/styles/atom.less
new file mode 100644
index 0000000..83a2805
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/atom.less
@@ -0,0 +1,6 @@
+@import "ui-variables";
+
+atom-workspace {
+  background-color: @app-background-color;
+  border-top: 1px solid rgba(0, 0, 0, .4);
+}
diff --git a/atom/packages/aesthetic-ui/styles/buttons.less b/atom/packages/aesthetic-ui/styles/buttons.less
new file mode 100644
index 0000000..8152365
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/buttons.less
@@ -0,0 +1,69 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
+  @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  color: @text-color;
+  background-color: transparent;
+  &:active,
+  &.selected:hover:active {
+  }
+  &.selected,
+  &.selected:hover {
+    color: @text-color-selected;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  }
+  &.selected:hover {
+  }
+}
+
+.btn-variant (@color) {
+  @bg: darken(@color, 10%);
+  @hover: @color;
+  @selected: @color;
+  @border: fadeout(darken(@color, 20%), 50%);
+  .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
+}
+
+.btn {
+  position: relative;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 3px; right: 4px; bottom: 4px; left: 3px;
+    pointer-events: none;
+  }
+  &:focus::after {
+    outline: 1px dotted black;
+  }
+  .ui-raised-shadow;
+  &:focus {
+    .ui-raised-shadow-active;
+    outline: none;
+  }
+  &:active {
+    .ui-inset-shadow-active;
+  }
+  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
+}
+
+.btn.btn-primary {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-info {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-success {
+  .btn-variant(@background-color-success);
+}
+.btn.btn-warning {
+  .btn-variant(@background-color-warning);
+}
+.btn.btn-error {
+  .btn-variant(@background-color-error);
+}
+
+.btn-group > .btn {
+  border: none;
+}
diff --git a/atom/packages/aesthetic-ui/styles/editor.less b/atom/packages/aesthetic-ui/styles/editor.less
new file mode 100644
index 0000000..4643108
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/editor.less
@@ -0,0 +1,52 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+atom-text-editor,
+atom-text-editor[mini], atom-text-editor[mini]::shadow,
+select.form-control,
+.settings-view select.form-control {
+  .ui-inset-shadow;
+  border-radius: 0;
+}
+
+atom-text-editor[mini], atom-text-editor[mini]::shadow,
+select.form-control,
+.settings-view select.form-control {
+  background-color: white;
+}
+
+atom-text-editor {
+  padding: 2px;
+}
+
+atom-text-editor[mini], atom-text-editor[mini]::shadow {
+  color: lighten(@text-color, 15%);
+
+  border-radius: @component-border-radius;
+  padding-left: @component-padding/2;
+
+  .cursor { border-color: #000; }
+  .selection .region { background-color: rgba(0, 0, 0, .2); }
+  .placeholder-text {
+    color: lighten(@text-color-subtle, 10%);
+  }
+}
+
+atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused::shadow {
+  color: @text-color;
+  background-color: @input-background-color;
+  border-color: @input-border-color;
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
+  .selection .region {
+    background-color: lighten(@background-color-info, 30%);
+  }
+}
+
+// FIXME: these should go in syntax themes?
+atom-text-editor, atom-text-editor::shadow {
+  .gutter.drop-shadow {
+    -webkit-box-shadow: -2px 0 10px 2px #222;
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/git.less b/atom/packages/aesthetic-ui/styles/git.less
new file mode 100644
index 0000000..38c7878
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/git.less
@@ -0,0 +1,9 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.status { .text(normal); }
+.status-added { .text(success); }
+.status-ignored { .text(subtle); }
+.status-modified { .text(warning); }
+.status-removed { .text(error); }
+.status-renamed { .text(info); }
diff --git a/atom/packages/aesthetic-ui/styles/lists.less b/atom/packages/aesthetic-ui/styles/lists.less
new file mode 100644
index 0000000..74c078f
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/lists.less
@@ -0,0 +1,133 @@
+@import "ui-variables";
+@import "ui-mixins";
+@import "octicon-mixins";
+
+.list-group, .list-tree {
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
+    .text(normal);
+  }
+
+  .generate-list-item-text-color(@class) {
+    li:not(.list-nested-item).text-@{class},
+    li.list-nested-item.text-@{class} > .list-item {
+      .text(@class);
+    }
+  }
+  .generate-list-item-text-color(subtle);
+  .generate-list-item-text-color(info);
+  .generate-list-item-text-color(success);
+  .generate-list-item-text-color(warning);
+  .generate-list-item-text-color(error);
+  .generate-list-item-text-color(selected);
+
+  .generate-list-item-status-color(@color, @status) {
+    li:not(.list-nested-item).status-@{status},
+    li.list-nested-item.status-@{status} > .list-item {
+      color: @color;
+    }
+
+    li:not(.list-nested-item).selected.status-@{status},
+    li.list-nested-item.selected.status-@{status} > .list-item {
+      color: darken(@color, 7%);
+    }
+  }
+  .generate-list-item-status-color(@text-color-subtle, ignored);
+  .generate-list-item-status-color(@text-color-added, added);
+  .generate-list-item-status-color(@text-color-renamed, renamed);
+  .generate-list-item-status-color(@text-color-modified, modified);
+  .generate-list-item-status-color(@text-color-removed, removed);
+
+  li:not(.list-nested-item).selected,
+  li.list-nested-item.selected > .list-item {
+    .text(selected);
+  }
+}
+
+.select-list ol.list-group,
+&.select-list ol.list-group {
+  li.two-lines {
+    .secondary-line { color: @text-color-subtle; }
+    &.selected .secondary-line {
+      color: lighten(@text-color-subtle, 10%);
+      text-shadow: none;
+    }
+  }
+
+  // We want to highlight the background of the list items because we dont
+  // know their size.
+  li.selected {
+    background-color: @background-color-selected;
+    &:before{ display: none; }
+  }
+
+  &.mark-active{
+    @active-icon-size: 14px;
+
+    // pad in front of the text where the icon would be We'll pad the non-
+    // active items with a 'fake' icon so other classes can pad the item
+    // without worrying about the icon padding.
+    li:before {
+      content: '';
+      background-color: transparent;
+      position: static;
+      display: inline-block;
+      left: auto; right: auto;
+      height: @active-icon-size;
+      width: @active-icon-size;
+    }
+    > li:not(.active):before {
+      margin-right: @component-icon-padding;
+    }
+    li.active {
+      .octicon(check, @active-icon-size);
+      &:before {
+        margin-right: @component-icon-padding;
+        color: @text-color-success;
+      }
+    }
+  }
+}
+
+.select-list.popover-list,
+autocomplete-suggestion-list.select-list.popover-list.popover-list {
+  background-color: white;
+  padding: 2px;
+  .ui-raised-shadow;
+
+  atom-text-editor {
+    margin-bottom: @component-padding/2;
+  }
+
+  .list-group li {
+    padding-left: @component-padding/2;
+  }
+}
+
+autocomplete-suggestion-list.select-list.popover-list .suggestion-description-more-link {
+  color: blue;
+  text-decoration: underline;
+}
+
+.ui-sortable {
+  li {
+    line-height: 2.5;
+  }
+
+  // For sortable lists in the settings view
+  li.ui-sortable-placeholder {
+    visibility: visible !important;
+    background-color: darken(@pane-item-background-color, 10%);
+  }
+}
+
+li.ui-draggable-dragging, li.ui-sortable-helper {
+  line-height: @component-line-height;
+  height: @component-line-height;
+  border: 0;
+  border-radius: 0;
+  list-style: none;
+  padding: 0 @component-padding;
+  background: @background-color-highlight;
+  box-shadow: 0 0 1px @base-border-color;
+}
diff --git a/atom/packages/aesthetic-ui/styles/messages.less b/atom/packages/aesthetic-ui/styles/messages.less
new file mode 100644
index 0000000..ce1556c
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/messages.less
@@ -0,0 +1,6 @@
+@import "ui-variables";
+
+ul.background-message {
+  font-weight: bold;
+  color: rgba(0, 0, 0, .18);
+}
diff --git a/atom/packages/aesthetic-ui/styles/overlays.less b/atom/packages/aesthetic-ui/styles/overlays.less
new file mode 100644
index 0000000..32e1820
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/overlays.less
@@ -0,0 +1,65 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+atom-panel.modal, .overlay {
+  color: @text-color;
+  background-color: @overlay-background-color;
+  padding: @component-padding;
+  border-radius: @component-border-radius;
+  top: 20px;
+  .ui-raised-shadow;
+  padding-top: 28px;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    height: 18px;
+    left: 2px;
+    background: linear-gradient(to right, #09246B, #A4CBF6);
+  }
+
+  &.from-top, &.modal {
+    transform: translateY(50vh) translateY(-50%);
+  }
+
+  atom-text-editor[mini] {
+    margin-bottom: @component-padding;
+  }
+
+  .select-list ol.list-group,
+  &.select-list ol.list-group {
+
+    background-color: @inset-panel-background-color;
+
+    position: relative;
+    border-top: 1px solid @shadow-2-color;
+    border-left: 1px solid @shadow-2-color;
+    border-bottom: 1px solid @highlight-2-color;
+    border-right: 1px solid @highlight-2-color;
+
+    li {
+      padding: @component-padding;
+      border-top: 1px solid @inset-panel-border-color;
+      border-left: 1px solid @inset-panel-border-color;
+      border-right: 1px solid @inset-panel-border-color;
+      &:last-child { border-bottom: 1px solid @inset-panel-border-color; }
+
+      &.two-lines { padding: @component-padding/2 @component-padding; }
+      &.selected {
+        .key-binding { background: transparent; }
+      }
+      .character-match { color: currentColor; }
+
+      .status.icon {
+        float: right;
+        margin-left: @component-icon-padding;
+        &:before {
+          margin-right: 0;
+        }
+      }
+    }
+
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/panels.less b/atom/packages/aesthetic-ui/styles/panels.less
new file mode 100644
index 0000000..8d4cad6
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/panels.less
@@ -0,0 +1,56 @@
+@import "ui-mixins";
+@import "ui-variables";
+@import "buttons";
+
+.panel {
+  &.bordered {
+    border: 1px solid @base-border-color;
+    border-radius: @component-border-radius;
+  }
+}
+
+atom-panel, .tool-panel {
+  .text(normal);
+  position: relative;
+
+  background-color: @tool-panel-background-color;
+
+  &.bottom, &.panel-bottom {
+    border-top: 1px solid @tool-panel-border-color;
+  }
+
+  &.left, &.panel-left {
+    border-right: 1px solid @tool-panel-border-color;
+  }
+
+  &.right, &.panel-right {
+    border-left: 1px solid @tool-panel-border-color;
+  }
+
+  .inset-panel {
+    border-radius: @component-border-radius;
+
+    border: 1px solid @tool-panel-border-color;
+  }
+}
+
+.inset-panel {
+  position: relative;
+  background-color: @inset-panel-background-color;
+}
+
+.panel-heading {
+  border-bottom: none;
+  padding: @component-padding - 2px @component-padding;
+
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
+
+  .btn {
+    @bg: lighten(@button-background-color, 10%);
+    @hover: lighten(@button-background-color-hover, 10%);
+    @selected: lighten(@button-background-color-selected, 10%);
+    @text: lighten(@text-color, 10%);
+    .btn-background(@bg, @hover, @selected, @button-border-color, @text, @text);
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/panes.less b/atom/packages/aesthetic-ui/styles/panes.less
new file mode 100644
index 0000000..2233a42
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/panes.less
@@ -0,0 +1,23 @@
+@import "ui-mixins";
+@import "ui-variables";
+@import "buttons";
+
+atom-pane-container {
+  atom-pane {
+    background-color: lighten(@app-background-color, 3%);
+
+    &:focus {
+      background-color: @app-background-color;
+    }
+  }
+
+  atom-pane-axis.horizontal > * {
+    border-right: 1px solid @pane-item-border-color;
+    &:last-child { border-right: none; }
+  }
+
+  atom-pane-axis.vertical > * {
+    border-bottom: 1px solid @pane-item-border-color;
+    &:last-child { border-bottom: none; }
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/progress.less b/atom/packages/aesthetic-ui/styles/progress.less
new file mode 100644
index 0000000..5d78670
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/progress.less
@@ -0,0 +1,72 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.loading-spinner(@size) {
+  width: @size;
+  height: @size;
+  display: block;
+
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &.inline-block {
+    display: inline-block;
+  }
+}
+
+.loading-spinner-large {
+  .loading-spinner(64px);
+}
+
+.loading-spinner-medium {
+  .loading-spinner(50px);
+}
+
+.loading-spinner-small {
+  .loading-spinner(32px);
+}
+
+.loading-spinner-tiny {
+  .loading-spinner(20px);
+}
+
+// Much learning from:
+// http://css-tricks.com/html5-progress-element/
+
+@progress-height: 16px;
+@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));
+
+progress {
+  height: @progress-height;
+  -webkit-appearance: none;
+  border-radius: @component-border-radius;
+  background-color: #ccc;
+  background-image:
+     -webkit-linear-gradient(-30deg,
+                             transparent 33%, rgba(0, 0, 0, .1) 33%,
+                             rgba(0,0, 0, .1) 66%, transparent 66%),
+                             @progress-shine-gradient;
+  border-radius: 2px;
+  background-size: 25px @progress-height, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+  border-radius: @component-border-radius;
+  background-image: @progress-shine-gradient;
+  background-color: @background-color-info;
+}
+
+progress[value] {
+  background-image: @progress-shine-gradient;
+  -webkit-animation: none;
+}
+
+@-webkit-keyframes animate-stripes {
+   100% { background-position: 100px 0px; }
+}
diff --git a/atom/packages/aesthetic-ui/styles/settings.less b/atom/packages/aesthetic-ui/styles/settings.less
new file mode 100644
index 0000000..c089db4
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/settings.less
@@ -0,0 +1,27 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.settings-view .package-card {
+  .ui-inset-shadow;
+  border: 0;
+  &, &:hover {
+    background: fade(@highlight-2-color, 10%);
+  }
+}
+
+.settings-view input[type="checkbox"] {
+  background: white;
+  .ui-inset-shadow;
+  &:checked {
+    background: white;
+    &::before, &::after {
+      background: black;
+    }
+  }
+  &:focus {
+    .ui-inset-shadow;
+    & ~ .setting-title {
+      outline: 1px dotted black;
+    }
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/sites.less b/atom/packages/aesthetic-ui/styles/sites.less
new file mode 100644
index 0000000..fa79d92
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/sites.less
@@ -0,0 +1,14 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.ui-site(@num, @color) {
+  .ui-site-@{num} {
+    background-color: @color;
+  }
+}
+
+.ui-site(1, @ui-site-color-1);
+.ui-site(2, @ui-site-color-2);
+.ui-site(3, @ui-site-color-3);
+.ui-site(4, @ui-site-color-4);
+.ui-site(5, @ui-site-color-5);
diff --git a/atom/packages/aesthetic-ui/styles/tabs.less b/atom/packages/aesthetic-ui/styles/tabs.less
new file mode 100644
index 0000000..1e8c462
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/tabs.less
@@ -0,0 +1,110 @@
+@import "ui-variables";
+@import "ui-mixins";
+@tab-radius: 3px;
+@modified-icon-width: 8px;
+@tab-skew: 30deg;
+@tab-top-padding: 8px;
+@tab-bottom-border-height: 0;
+@tab-border: 1px solid @tab-border-color;
+@tab-max-width: 160px;
+
+.tab-bar {
+  height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+  background: @base-background-color;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    height: @tab-bottom-border-height;
+    left: 0;
+    right: 0;
+    background-color: @tab-background-color-active;
+    border-bottom: 1px solid @tab-bar-border-color;
+    pointer-events: none;
+  }
+
+  .tab {
+    position: relative;
+    top: @tab-top-padding;
+    max-width: @tab-max-width;
+    height: @tab-height;
+    box-sizing: border-box;
+    line-height: @tab-height;
+    color: @text-color;
+    padding: 0;
+    margin: 0 0 0 0;
+    .ui-tab-shadow;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    transition: color .1s ease-in;
+    padding: 0px 6px 4px 6px;
+
+    .close-icon {
+      right: 6px;
+      z-index: 3;
+      text-align: right;
+      line-height: @tab-height;
+      color: @text-color;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+
+    &.modified:not(:hover) .close-icon {
+      top: @tab-height/2 - @modified-icon-width/2 + 1px;
+      width: @modified-icon-width;
+      height: @modified-icon-width;
+    }
+
+    &.modified:hover .close-icon:hover {
+      color: @text-color-highlight;
+    }
+
+    .title {
+      position: relative;
+      z-index: 1;
+      padding-right: 10px
+    }
+  }
+
+  .tab.active {
+    z-index: 1;
+    margin-top: -2px;
+    height: @tab-height + 2px;
+    border-bottom: 1px solid @base-background-color;
+
+    .close-icon {
+      line-height: @tab-height - 1px;
+      color: @text-color;
+    }
+  }
+
+  .tab:hover {
+    color: @text-color-highlight;
+  }
+
+  .tab.active:hover .close-icon {
+    color: @text-color;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .placeholder {
+    height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+    margin-left: -9px; // center between tabs
+    pointer-events: none;
+    &:after {
+      top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px;
+    }
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/text.less b/atom/packages/aesthetic-ui/styles/text.less
new file mode 100644
index 0000000..e4d53f0
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/text.less
@@ -0,0 +1,81 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+h1,
+h2,
+h3 {
+  line-height: 1em;
+  margin-bottom: 15px
+}
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+
+p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: normal;
+}
+
+pre {
+  box-shadow: none;
+  color: @text-color;
+  background: @inset-panel-background-color;
+  border-radius: @component-border-radius;
+  border: none;
+  margin: 0;
+}
+
+code {
+  .text(highlight);
+  background: @background-color-highlight;
+  border-radius: @component-border-radius;
+}
+
+.selected { .text(highlight); }
+
+.text-smaller { font-size: 0.9em; }
+
+.text-subtle { .text(subtle); }
+.text-highlight { .text(highlight); }
+
+.text-error { .text(error); }
+.text-info {
+  .text(info);
+  &:hover { color: @text-color-info; }
+}
+.text-warning {
+  .text(warning);
+  &:hover { color: @text-color-warning; }
+}
+.text-success {
+  .text(success);
+  &:hover { color: @text-color-success; }
+}
+
+.highlight {
+  color: @text-color-highlight;
+  font-weight: bold;
+  text-shadow: none;
+  background-color: @background-color-highlight;
+  border-radius: @component-border-radius;
+  padding: 1px 3px;
+}
+
+.highlight-color(@name, @color) {
+  .highlight-@{name} {
+    color: @text-color-highlight;
+    font-weight: bold;
+    text-shadow: none;
+    background-color: @color;
+    border-radius: @component-border-radius;
+    padding: 1px 3px;
+  }
+}
+.highlight-color(info, @background-color-info);
+.highlight-color(warning, @background-color-warning);
+.highlight-color(error, @background-color-error);
+.highlight-color(success, @background-color-success);
diff --git a/atom/packages/aesthetic-ui/styles/tooltips.less b/atom/packages/aesthetic-ui/styles/tooltips.less
new file mode 100644
index 0000000..37550e0
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/tooltips.less
@@ -0,0 +1,50 @@
+@import "ui-variables";
+
+.tooltip {
+  @tip-background-color: #333;
+  @tip-text-color: #fff;
+  white-space: nowrap;
+
+  .keystroke {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    color: #c0c0c0;
+    padding-left: 2px;
+  }
+
+  &.in { opacity: 1; }
+
+  .tooltip-inner {
+    line-height: 19px;
+    border-radius: @component-border-radius;
+    background-color: @tip-background-color;
+    color: @tip-text-color;
+    white-space: nowrap;
+    max-width: none;
+  }
+
+  &.top .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-left .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-right .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.right .tooltip-arrow {
+    border-right-color: @tip-background-color;
+  }
+  &.left .tooltip-arrow {
+    border-left-color: @tip-background-color;
+  }
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+}
diff --git a/atom/packages/aesthetic-ui/styles/tree-view.less b/atom/packages/aesthetic-ui/styles/tree-view.less
new file mode 100644
index 0000000..d371c84
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/tree-view.less
@@ -0,0 +1,244 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.tree-view {
+	font-size: @font-size;
+	background: @tree-view-background-color;
+	.ui-inset-shadow;
+	position: relative;
+	padding-bottom: 108px;
+
+	// Let the selector war commence!!
+	.list-item.list-item.list-item.list-item {
+		line-height: 20px;
+	}
+
+	box-shadow: none;
+	--webkit-font-smoothing: none;
+
+	&:after {
+		pointer-events: none;
+		background-image: url('data:image/png;base64,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');
+		background-position: bottom left;
+		background-repeat: no-repeat;
+		width: 100%;
+		height: 200px;
+		position: fixed;
+		bottom: 0;
+		z-index: -4;
+		left: 0;
+		content: '';
+		image-rendering: pixelated;
+	}
+
+	.selected::before {
+		width: 0;
+		height: 0;
+		margin-left: 2px;
+		margin-right: 2px;
+	}
+
+	.directory.selected > .header > .name {
+		position: relative;
+		color: white;
+		&:after {
+			content: '';
+			width: calc(100% ~"-" 15px);
+			height: 120%;
+			position: absolute;
+			left: 18px;
+			z-index: -2;
+			border: 1px dotted gray;
+			top: -1px;
+			background-color: navy;
+		}
+	}
+	.file.selected > span {
+		position: relative;
+		color: white;
+		&:after {
+			content: '';
+			width: calc(100% ~"-" 15px);
+			height: 120%;
+			position: absolute;
+			left: 18px;
+			z-index: -2;
+			border: 1px dotted gray;
+			top: -1px;
+			background-color: navy;
+		}
+	}
+}
+
+.tree-view-resizer {
+	.tree-view-resize-handle {
+		width: 8px;
+		background: #D3D0C7;
+		border-left: 1px solid gray;
+	}
+}
+
+.focusable-panel {
+	opacity: 1;
+
+	&:focus {
+		.selected::before {
+			background: @background-color-selected;
+			color: white;
+		}
+	}
+}
+
+.directory.entry {
+	&.expanded {
+		.header {
+			&::before {
+				// Plus sign.
+				content: '';
+				left: 1px;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAFElEQVQI12MIDXVgQIZeK1D4IHkAbMQGB9awVs4AAAAASUVORK5CYII=');
+				background-position: center center;
+				background-repeat: no-repeat;
+				height: 9px !important;
+				width: 12px !important;
+				image-rendering: pixelated;
+				z-index: 1;
+			}
+			.icon-file-directory::before {
+				// Directory icon.
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAZ0lEQVR4AZWPhw0AMQgD2fXX8kyM9B3p0ouVjg+IXZsCkCwdEwAHvHUAYsoGNRl9gIHcDzObAowApPl4rADd9P6v4XvWPuDpAWD8Byo8Q4rUJYAPN10BwJRugHCnwGwAhGwugA1tAzeXZSkYJ9mbPwAAAABJRU5ErkJggg==');
+				content: '';
+				image-rendering: pixelated;
+				z-index: 1;
+				transform: translateY(1px);
+			}
+		}
+	}
+	&.collapsed {
+		.header {
+			&::before {
+				// Minus sign.
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAGElEQVQI12MIDXVgAMMGCPZagWADIUgeAJDECAeFz1XEAAAAAElFTkSuQmCC') !important;
+				background-position: center center;
+				background-repeat: no-repeat;
+				content: '' !important;
+				height: 9px !important;
+				width: 12px !important;
+				image-rendering: pixelated;
+			}
+			.icon-file-directory::before {
+				// Directory icon.
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAYElEQVR4AZ2NxxWAMAzF2DVreSatkxvpPRTDf8KnCB3u44ogcoyEPQnhhbXWORISeHDi/8Ds1FqnC87xhoBJzS7IEygF+lUXUBb4UUBZYL+XAg+vNwGMhiLET7cu6PdH8BLwRqwGgozlAAAAAElFTkSuQmCC');
+				content: '';
+				image-rendering: pixelated;
+				transform: translateY(1px);
+			}
+		}
+	}
+}
+
+/* filetypes */
+
+.icon-file-text::before {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVR42mNggIKGhob/xGAGXAAkSQgcOHAAtyHEGgACWA0hxgCgMnRMmgHILsFpAL4AJMqAURfQ0AVEG0CxCygyACRBLMYwAEs6JwYzAAB9sXFvgXLcRQAAAABJRU5ErkJggg==');
+	background-position: center center;
+	content: '';
+	height: 16px;
+	width: 16px;
+	image-rendering: pixelated;
+}
+
+.icon-file-media::before {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAj0lEQVR42o2SARIAIQRFO7qjdbN2FRIRO3/ameXtRw0ARkUtCvz4it57DKkCMDTkfxmARwWw8rcGyQEAGtndJ2oWsRNdbFvABPs3DXDFFsDJ+hHArTh0YAA0PC6OAeKAZsDrY7BqMXcw24UFksmfM8od6LBbeDq4rbIMsCs8Lk8FULnSVwBPvCIHyGwnkvgAtFsewSfEAL4AAAAASUVORK5CYII=');
+	background-position: center center;
+	content: '';
+	height: 16px;
+	width: 16px;
+	image-rendering: pixelated;
+}
+
+.icon-file-binary::before {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVR42r2SSw7AIAhEOTpH42ZU/CJB1IUlnQSJeQ4FQETeCaKQC1EQUQw5AUgsITtAumJ1B9BO/gGcTEVNh11AwrpqLpQbH3DV0hJQX8ipuKp1KWk3gQMFAJxhuo13LTDkr9SA+wFKPgHk0DT+AXfbAhg52knMq2qBkdzFcnY/1AerkX9hkHz/KAAAAABJRU5ErkJggg==');
+	background-position: center center;
+	content: '';
+	height: 16px;
+	width: 16px;
+	image-rendering: pixelated;
+}
+
+.icon-book::before {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARElEQVR42mNgQID/RNJYwX8QaGhowEtjNQRZklgaqwHEgAMHDtDYAKgkunMHyAXorhl1Ab1cQLYBIAliMa5c+Z8EjAIAc/wzNSUthNwAAAAASUVORK5CYII=');
+	background-position: center center;
+	content: '';
+	height: 16px;
+	margin-left: 2px;
+	margin-right: 3px !important; // This counteracts the default 5px right margin
+	width: 16px;
+	image-rendering: pixelated;
+}
+
+.icon-repo::before {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAsklEQVR4AZ2R1wGDMAwFtRKrsIJX4lMrsMpbyblEQlF6eS643IkUm99kXbUk+VmQ23SmQzDXtQ/f9633My3zYYStEbihGbTkVTdrTw86gFw9o9VrL8MpmkKntyO9Np8EHyeFokNgrtpFA9Bx6iiiEKgcNAmaGYx0QSVcOCIWRbPogrpASqjPA/aVkHR/g7m6UOsQimZe2v9QxH06Te//dDqS1+fuNMwhDM/u2p4Frrr9kRMAOsBw6rbrYwAAAABJRU5ErkJggg==');
+	background-position: center center;
+	content: '';
+	height: 16px;
+	width: 16px;
+	image-rendering: pixelated;
+}
+
+/* lines */
+
+ol.entries {
+	position: relative !important;
+}
+
+ol.entries > li {
+	&::after {
+		width: 0;
+		top: -11px;
+		left: 24px;
+		bottom: 12px;
+		position: absolute;
+		border-left: 1px dotted gray;
+		content: '';
+		display: block;
+	}
+	&.file::after {
+		left: 7px;
+	}
+	&:last-child::after {
+		bottom: auto;
+		height: 19px;
+	}
+}
+
+.icon::before {
+	top: 4px;
+}
+
+.entry {
+	position: relative;
+}
+
+.entry.file::before {
+	&.selected {
+		background: none;
+	}
+	position: absolute;
+	background: none !important;
+	border-bottom: 1px dotted gray;
+	width: 11px;
+	height: 0;
+	top: 9px;
+	left: 7px;
+}
+
+.entry.directory::before {
+	position: absolute;
+	background: none !important;
+	border-bottom: 1px dotted gray;
+	width: 11px;
+	height: 0;
+	top: 10px;
+	left: 22px;
+}
diff --git a/atom/packages/aesthetic-ui/styles/ui-mixins.less b/atom/packages/aesthetic-ui/styles/ui-mixins.less
new file mode 100644
index 0000000..51ea941
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/ui-mixins.less
@@ -0,0 +1,84 @@
+@import "ui-variables";
+
+// Pattern matching; ish is cray.
+// http://lesscss.org/#-pattern-matching-and-guard-expressions
+.text(normal) {
+  font-weight: normal;
+  color: @text-color;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+.text(subtle) {
+  font-weight: normal;
+  color: @text-color-subtle;
+  text-shadow: none;
+}
+.text(highlight) {
+  font-weight: normal;
+  color: @text-color-highlight;
+}
+.text(selected) {
+  font-weight: normal;
+  color: @text-color-selected;
+  text-shadow: none;
+}
+
+.text(info) {
+  color: @text-color-info;
+  text-shadow: none;
+}
+.text(success) {
+  color: @text-color-success;
+  text-shadow: none;
+}
+.text(warning) {
+  color: @text-color-warning;
+  text-shadow: none;
+}
+.text(error) {
+  color: @text-color-error;
+  text-shadow: none;
+}
+
+.ui-tab-shadow {
+  box-shadow:
+    inset -1px 0px 0 @shadow-2-color,
+    inset 1px 1px 0 @highlight-2-color,
+    inset -2px 0px 0 @shadow-1-color,
+    inset 2px 2px 0 @highlight-1-color;
+}
+.ui-raised-shadow {
+  box-shadow:
+    inset -1px -1px 0 @shadow-2-color,
+    inset 1px 1px 0 @highlight-2-color,
+    inset -2px -2px 0 @shadow-1-color,
+    inset 2px 2px 0 @highlight-1-color;
+}
+.ui-raised-shadow-active {
+  box-shadow:
+    inset -1px -1px 0 @shadow-2-color,
+    inset 1px 1px 0 @highlight-2-color,
+    inset -2px -2px 0 @shadow-1-color,
+    inset 2px 2px 0 @highlight-1-color,
+    -1px -1px black,
+    -1px 1px black,
+    1px -1px black,
+    1px 1px black;
+}
+.ui-inset-shadow {
+  box-shadow:
+    inset -1px -1px 0 @highlight-2-color,
+    inset 1px 1px 0 @shadow-2-color,
+    inset -2px -2px 0 @highlight-1-color,
+    inset 2px 2px 0 @shadow-1-color;
+}
+.ui-inset-shadow-active {
+  box-shadow:
+    inset -1px -1px 0 @highlight-2-color,
+    inset 1px 1px 0 @shadow-2-color,
+    inset -2px -2px 0 @highlight-1-color,
+    inset 2px 2px 0 @shadow-1-color,
+    -1px -1px black,
+    -1px 1px black,
+    1px -1px black,
+    1px 1px black;
+}
diff --git a/atom/packages/aesthetic-ui/styles/ui-variables.less b/atom/packages/aesthetic-ui/styles/ui-variables.less
new file mode 100644
index 0000000..eff9d38
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/ui-variables.less
@@ -0,0 +1,91 @@
+// Colors
+
+@text-color: #000;
+@text-color-subtle: #999;
+@text-color-highlight: #000;
+@text-color-selected: #fff;
+
+@text-color-info: blue;
+@text-color-success: green;
+@text-color-warning: #ff6600;
+@text-color-error: red;
+
+@text-color-ignored: @text-color-subtle;
+@text-color-added: @text-color-success;
+@text-color-renamed: @text-color-info;
+@text-color-modified: orange;
+@text-color-removed: @text-color-error;
+
+@background-color-info: #0098ff;
+@background-color-success: #17ca65;
+@background-color-warning: #ff4800;
+@background-color-error: #c00;
+@background-color-highlight: rgba(0, 0, 0, .1);
+@background-color-selected: #07216C;
+
+@app-background-color: #376DA6;
+
+@base-background-color: #D3D0C7;
+@base-border-color: @shadow-1-color;
+
+@pane-item-background-color: @base-background-color;
+@pane-item-border-color: @base-border-color;
+
+@input-background-color: white;
+@input-border-color: fadeout(@base-border-color, 10%);
+
+@tool-panel-background-color: @base-background-color;
+@tool-panel-border-color: @base-border-color;
+
+@inset-panel-background-color: #fff;
+@inset-panel-border-color: fadeout(@base-border-color, 10%);
+
+@panel-heading-background-color: #c3c3c3;
+@panel-heading-border-color: transparent;
+
+@overlay-background-color: @base-background-color;
+@overlay-border-color: @base-border-color;
+
+@button-background-color: @base-background-color;
+@button-background-color-hover: lighten(@button-background-color, 5%);
+@button-background-color-selected: #888;
+@button-border-color: rgba(0, 0, 0, 0.15);
+
+@tab-bar-background-color: @base-background-color;
+@tab-bar-border-color: @highlight-2-color;
+@tab-background-color: @base-background-color;
+@tab-background-color-active: @base-background-color;
+
+@tree-view-background-color: white;
+@tree-view-border-color: @base-border-color;
+
+@ui-site-color-1: @background-color-success; // green
+@ui-site-color-2: @background-color-info; // blue
+@ui-site-color-3: @background-color-warning; // orange
+@ui-site-color-4: #db2ff4; // purple
+@ui-site-color-5: #f5e11d; // yellow
+
+
+// Sizes
+
+@font-size: 11px;
+@input-font-size: 14px;
+@disclosure-arrow-size: 12px;
+
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+@component-border-radius: 0px;
+
+@tab-height: 28px;
+
+
+// Other
+
+@font-family: 'Tahoma', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+
+@shadow-1-color: #848284;
+@shadow-2-color: #424142;
+@highlight-1-color: @base-background-color;
+@highlight-2-color: #fff;
diff --git a/atom/packages/aesthetic-ui/styles/utilities.less b/atom/packages/aesthetic-ui/styles/utilities.less
new file mode 100644
index 0000000..d6428f6
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/utilities.less
@@ -0,0 +1,20 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.key-binding {
+  background: #fff;
+  border: 1px solid lighten(@base-border-color, 20%);
+  text-shadow: none;
+  display: inline-block;
+  line-height: 100%;
+  border-radius: @component-border-radius;
+  margin-left: @component-icon-padding;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: @font-size - 1px;
+  padding: @component-padding / 2;
+}
+
+.badge {
+  .text(highlight);
+  background: @background-color-highlight;
+}