Merge pull request #18484 from atom/sm/atom-ui

Migrate 'atom-ui' into core
2026-01-24 06:18:03 -05:00 · 2018-11-29 14:29:42 +09:00
parent 9d6e4dcee4 9be188141a
commit 08063d67dd
50 changed files with 3945 additions and 40 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -157,7 +157,7 @@
    "apparatus": {
      "version": "0.0.10",
      "resolved": "https://registry.npmjs.org/apparatus/-/apparatus-0.0.10.tgz",
-      "integrity": "sha512-KLy/ugo33KZA7nugtQ7O0E1c8kQ52N3IvD/XgIh4w/Nr28ypfkwDfA67F1ev4N1m5D+BOk1+b2dEJDfpj/VvZg==",
+      "integrity": "sha1-gep1Z3Ktp3hj21TO7oICwQm9yj4=",
      "requires": {
        "sylvester": ">= 0.0.8"
      }
@@ -348,7 +348,7 @@
    "atom-pathspec": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/atom-pathspec/-/atom-pathspec-0.0.0.tgz",
-      "integrity": "sha512-7UMEHdTtBV5sJONT0uMeQ6M8JFdfMQy/14rxuP6OuoFfSiDjxyZHuorIbv8gqhRB3FQMMLPzqONoFJE2cpHiCg=="
+      "integrity": "sha1-Z6q6+VAZsK/Y4xWLLNexjXN2Q/E="
    },
    "atom-select-list": {
      "version": "0.7.2",
@@ -364,11 +364,6 @@
      "resolved": "https://registry.npmjs.org/atom-slick/-/atom-slick-2.0.0.tgz",
      "integrity": "sha1-/w2+Fb4sTtomi50w124lF+C308o="
    },
-    "atom-ui": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/atom-ui/-/atom-ui-0.4.1.tgz",
-      "integrity": "sha1-cNl3ZsukcW15jpSWKq0HkghB6lw="
-    },
    "autocomplete-atom-api": {
      "version": "https://www.atom.io/api/packages/autocomplete-atom-api/versions/0.10.7/tarball",
      "integrity": "sha512-027xza+IwcoAut6ryUQYJGXkIOJkFVAA2mRzmOX5DdADSrifXDn3BZtPjfRpMMvqstC8H+xuxNs0dOdUYhssqw=="
@@ -5145,7 +5140,7 @@
    "spelling-manager": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/spelling-manager/-/spelling-manager-1.1.0.tgz",
-      "integrity": "sha512-PpTP6XUZflCWO9YZO3wBSGAmqrUP6BFwSdmVFS6WBT9rFYg3ysmrIfyD1KnaVcnW6wuIKf+FDwefvU8PsD8Smg==",
+      "integrity": "sha1-UZmGdZUpHgVjlExuL70ao02X3TQ=",
      "requires": {
        "natural": "0.5.0",
        "xregexp": "^3.2.0"
@@ -5237,7 +5232,7 @@
    "streamroller": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-0.7.0.tgz",
-      "integrity": "sha512-WREzfy0r0zUqp3lGO096wRuUp7ho1X6uo/7DJfTlEi0Iv/4gT7YHqXDjKC2ioVGBZtE8QzsQD9nx1nIuoZ57jQ==",
+      "integrity": "sha1-odG3z4PTmvsNYwSaWsv5NJO99ks=",
      "requires": {
        "date-format": "^1.2.0",
        "debug": "^3.1.0",
@@ -5724,7 +5719,7 @@
      "dependencies": {
        "minimist": {
          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
        },
        "prebuild-install": {
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
    "atom-light-syntax": "file:packages/atom-light-syntax",
    "atom-light-ui": "file:packages/atom-light-ui",
    "atom-select-list": "^0.7.2",
-    "atom-ui": "0.4.1",
    "autocomplete-atom-api": "https://www.atom.io/api/packages/autocomplete-atom-api/versions/0.10.7/tarball",
    "autocomplete-css": "https://www.atom.io/api/packages/autocomplete-css/versions/0.17.5/tarball",
    "autocomplete-html": "https://www.atom.io/api/packages/autocomplete-html/versions/0.8.8/tarball",
--- a/static/atom-ui/README.md
+++ b/static/atom-ui/README.md
@@ -0,0 +1,13 @@
+# :sparkles: Atom UI :sparkles:
+
+This is Atom's UI library. Originally forked from Bootstrap `3.3.6`, then merged with some core styles and now tweaked to Atom's needy needs.
+
+## Components
+
+Here a list of [all components](atom-ui.less). Open the [Styleguide](https://github.com/atom/styleguide) package (`cmd-ctrl-shift-g`) to see them in action and how to use them.
+
+![Styleguide](https://cloud.githubusercontent.com/assets/378023/15767543/ccecf9bc-2983-11e6-9c5e-d228d39f52b0.png)
+
+## Feature requests
+
+If you need something, feel free to open an issue and it might can be added. :v:
--- a/static/atom-ui/_index.less
+++ b/static/atom-ui/_index.less
@@ -0,0 +1,35 @@
+// Atom UI
+
+// Private! Don't use these in packages.
+// If you need something, feel free to open an issue and it might can be made public
+@import "styles/private/scaffolding.less";
+
+@import "styles/private/alerts.less";
+@import "styles/private/close.less";
+@import "styles/private/code.less";
+@import "styles/private/forms.less";
+@import "styles/private/links.less";
+@import "styles/private/navs.less";
+@import "styles/private/sections.less";
+@import "styles/private/tables.less";
+@import "styles/private/utilities.less";
+
+
+// Public components
+// Open the Styleguide to see them in action
+@import "styles/badges.less";
+@import "styles/button-groups.less";
+@import "styles/buttons.less";
+@import "styles/git-status.less";
+@import "styles/icons.less";
+@import "styles/inputs.less";
+@import "styles/layout.less";
+@import "styles/lists.less";
+@import "styles/loading.less";
+@import "styles/messages.less";
+@import "styles/modals.less";
+@import "styles/panels.less";
+@import "styles/select-list.less";
+@import "styles/site-colors.less";
+@import "styles/text.less";
+@import "styles/tooltip.less";
--- a/static/atom-ui/styles/badges.less
+++ b/static/atom-ui/styles/badges.less
@@ -0,0 +1,64 @@
+@import "ui-variables";
+
+.badge {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 1em;
+
+  &:empty {
+    display: none; // Hide when un-used
+  }
+
+
+  // Color ----------------------
+
+  .badge-color( @fg: @text-color-selected; @bg: @background-color-selected; ) {
+    color: @fg;
+    background-color: @bg;
+  }
+  .badge-color();
+  &.badge-info    { .badge-color(white, @background-color-info); }
+  &.badge-success { .badge-color(white, @background-color-success); }
+  &.badge-warning { .badge-color(white, @background-color-warning); }
+  &.badge-error   { .badge-color(white, @background-color-error); }
+
+
+  // Size ----------------------
+
+  .badge-size( @size: @font-size; ) {
+    @padding: round(@size/4);
+    font-size: @size;
+    min-width: @size + @padding*2;
+    padding: @padding round(@padding*1.5);
+  }
+  .badge-size(); // default
+
+  // Fixed size
+  &.badge-large  { .badge-size(18px); }
+  &.badge-medium { .badge-size(14px); }
+  &.badge-small  { .badge-size(10px); }
+
+  // Flexible size
+  // The size changes depending on the parent element
+  // Best used for larger sizes, since em's can cause rounding errors
+  &.badge-flexible {
+    @size: .8em;
+    @padding: @size/2;
+    font-size: @size;
+    min-width: @size + @padding*2;
+    padding: @padding @padding*1.5;
+  }
+
+
+  // Icon ----------------------
+
+  &.icon {
+    font-size: round(@component-icon-size*0.8);
+    padding: @component-icon-padding @component-icon-padding*2;
+  }
+
+}
--- a/static/atom-ui/styles/button-groups.less
+++ b/static/atom-ui/styles/button-groups.less
@@ -0,0 +1,187 @@
+@import "variables/variables";
+@import "ui-variables";
+@import "mixins/mixins";
+
+//
+// Button groups
+// --------------------------------------------------
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+  > .btn {
+    position: relative;
+    float: left;
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+  }
+}
+
+
+// Borders
+// ---------------------------------------------------------
+
+.btn-group > .btn {
+  border-left: 1px solid @button-border-color;
+  border-right: 1px solid @button-border-color;
+}
+.btn-group > .btn:first-child {
+  border-left: none;
+  border-top-left-radius: @component-border-radius;
+  border-bottom-left-radius: @component-border-radius;
+}
+.btn-group > .btn:last-child,
+.btn-group > .btn.selected:last-child,
+.btn-group > .dropdown-toggle {
+  border-right: none;
+  border-top-right-radius: @component-border-radius;
+  border-bottom-right-radius: @component-border-radius;
+}
+
+// Prevent double borders when buttons are next to each other
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  margin-left: -5px; // Offset the first child's margin
+  &:extend(.clearfix all);
+
+  .btn,
+  .btn-group,
+  .input-group {
+    float: left;
+  }
+  > .btn,
+  > .btn-group,
+  > .input-group {
+    margin-left: 5px;
+  }
+}
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-left: 0;
+  &:not(:last-child):not(.dropdown-toggle) {
+    .border-right-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  .border-left-radius(0);
+}
+
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-right-radius(0);
+  }
+}
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  .border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { &:extend(.btn-xs); }
+.btn-group-sm > .btn { &:extend(.btn-sm); }
+.btn-group-lg > .btn { &:extend(.btn-lg); }
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.btn-group > .btn-lg + .dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group.open .dropdown-toggle {
+  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    box-shadow: none;
+  }
+}
+
+
+// Reposition the caret
+.btn .caret {
+  margin-left: 0;
+}
+// Carets in other button sizes
+.btn-lg .caret {
+  border-width: @caret-width-large @caret-width-large 0;
+  border-bottom-width: 0;
+}
+// Upside down carets for .dropup
+.dropup .btn-lg .caret {
+  border-width: 0 @caret-width-large @caret-width-large;
+}
+
+
+// Justified button groups
+// ----------------------
+
+.btn-group-justified {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  > .btn,
+  > .btn-group {
+    float: none;
+    display: table-cell;
+    width: 1%;
+  }
+  > .btn-group .btn {
+    width: 100%;
+  }
+
+  > .btn-group .dropdown-menu {
+    left: auto;
+  }
+}
--- a/static/atom-ui/styles/buttons.less
+++ b/static/atom-ui/styles/buttons.less
@@ -0,0 +1,274 @@
+@import "variables/variables";
+@import "ui-variables";
+@import "mixins/mixins";
+
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  height: @component-line-height + 2px;
+  padding: 0 @component-padding;
+  font-size: @font-size;
+  font-weight: normal;
+  line-height: @component-line-height;
+  text-align: center;
+  vertical-align: middle;
+  border: none;
+  border-radius: @component-border-radius;
+  background-color: @btn-default-bg;
+  white-space: nowrap;
+  cursor: pointer;
+  z-index: 0;
+  -webkit-user-select: none;
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      .tab-focus();
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    color: @btn-default-color;
+    text-decoration: none;
+    background-color: @button-background-color-hover;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+  }
+
+  &.selected,
+  &.selected:hover {
+    // we want the selected button to behave like the :hover button; it's on top of the other buttons.
+    z-index: 1;
+    color: @text-color-selected;
+    background-color: @button-background-color-selected;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+    opacity: .65;
+    box-shadow: none;
+  }
+
+  a& {
+    &.disabled,
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+}
+
+
+// Button variants
+// --------------------------------------------------
+
+.button-variant(@color; @background;) {
+  color: @color;
+  background-color: @background;
+
+  &:focus,
+  &.focus {
+    color: @color;
+    background-color: darken(@background, 10%);
+  }
+  &:hover {
+    color: @color;
+    background-color: darken(@background, 10%);
+  }
+  &:active,
+  &.active {
+    color: @color;
+    background-color: darken(@background, 10%);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: @color;
+      background-color: darken(@background, 17%);
+    }
+  }
+  &.selected,
+  &.selected:hover {
+    // we want the selected button to behave like the :hover button; it's on top of the other buttons.
+    z-index: 1;
+    background-color: darken(@background, 10%);
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: @background;
+    }
+  }
+
+  .badge {
+    color: @background;
+    background-color: @color;
+  }
+}
+
+.btn-primary {
+  .button-variant(@btn-primary-color; @btn-primary-bg;);
+}
+// Success appears as green
+.btn-success {
+  .button-variant(@btn-success-color; @btn-success-bg;);
+}
+// Info appears as blue-green
+.btn-info {
+  .button-variant(@btn-info-color; @btn-info-bg;);
+}
+// Warning appears as orange
+.btn-warning {
+  .button-variant(@btn-warning-color; @btn-warning-bg;);
+}
+// Danger and error appear as red
+.btn-error {
+  .button-variant(@btn-error-color; @btn-error-bg;);
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+.btn-xs,
+.btn-group-xs > .btn {
+  padding: @component-padding/4 @component-padding/2;
+  font-size: @font-size - 2px;
+  height: auto;
+  line-height: 1.3em;
+  &.icon:before {
+    font-size: @font-size - 2px;
+  }
+}
+.btn-sm,
+.btn-group-sm > .btn {
+  padding: @component-padding/4 @component-padding/2;
+  height: auto;
+  line-height: 1.3em;
+  &.icon:before {
+    font-size: @font-size + 1px;
+  }
+}
+.btn-lg,
+.btn-group-lg > .btn {
+  font-size: @font-size + 2px;
+  padding: @component-padding - 2px  @component-padding + 2px;
+  height: auto;
+  line-height: 1.3em;
+  &.icon:before {
+    font-size: @font-size + 6px;
+  }
+}
+
+
+// Link button
+// -------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  color: @link-color;
+  font-weight: normal;
+  border-radius: 0;
+  &,
+  &:active,
+  &.active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+    text-decoration: @link-hover-decoration;
+    background-color: transparent;
+  }
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus {
+      color: @btn-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+}
+
+
+// Block button
+// --------------------------------------------------
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+
+// Icon buttons
+// --------------------------------------------------
+
+.btn.icon {
+  &:before {
+    width: initial;
+    height: initial;
+    margin-right: .3125em;
+  }
+  &:empty:before {
+    margin-right: 0;
+  }
+}
+
+
+// Button Toolbar
+// --------------------------------------------------
+
+.btn-toolbar {
+  > .btn-group + .btn-group,
+  > .btn-group + .btn,
+  > .btn + .btn {
+    float: none;
+    display: inline-block;
+    margin-left: 0;
+  }
+  > * {
+    margin-right: @component-padding / 2;
+  }
+  > *:last-child {
+    margin-right: 0;
+  }
+}
--- a/static/atom-ui/styles/git-status.less
+++ b/static/atom-ui/styles/git-status.less
@@ -0,0 +1,13 @@
+@import "ui-variables";
+
+//
+// Git Status
+// --------------------------------------------------
+
+.status {
+  &-ignored  { color: @text-color-subtle; }
+  &-added    { color: @text-color-success; }
+  &-modified { color: @text-color-warning; }
+  &-removed  { color: @text-color-error; }
+  &-renamed  { color: @text-color-info; }
+}
--- a/static/atom-ui/styles/icons.less
+++ b/static/atom-ui/styles/icons.less
@@ -0,0 +1,13 @@
+@import "ui-variables";
+
+.icon::before {
+  margin-right: @component-icon-padding;
+}
+
+a.icon {
+  text-decoration: none;
+  color: @text-color;
+  &:hover{
+    color: @text-color-highlight;
+  }
+}
--- a/static/atom-ui/styles/inputs.less
+++ b/static/atom-ui/styles/inputs.less
@@ -0,0 +1,383 @@
+@import "./variables/ui-variables"; // Fallback for @use-custom-controls
+@import "ui-variables";
+
+@component-size: @component-icon-size; // use for text-less controls like radio, checkboxes etc.
+@component-margin-side: .3em;
+@text-component-height: 2em;
+@component-background-color: mix(@text-color, @base-background-color, 20%);
+
+
+//
+// Overrides
+// -------------------------
+
+input.input-radio,
+input.input-checkbox,
+input.input-toggle {
+  margin-top: 0; // Override Bootstrap's 4px
+}
+.input-label {
+  margin-bottom: 0;
+}
+
+//
+// Mixins
+// -------------------------
+
+.input-field-mixin() {
+  padding: .25em .4em;
+  line-height: 1.5; // line-height + padding = @text-component-height
+  border-radius: @component-border-radius;
+  border: 1px solid @input-border-color;
+  background-color: @input-background-color;
+  &::-webkit-input-placeholder {
+    color: @text-color-subtle;
+  }
+  &:invalid {
+    color: @text-color-error;
+    border-color: @background-color-error;
+  }
+}
+
+.input-block-mixin() {
+  display: block;
+  width: 100%;
+}
+
+
+//
+// Checkbox
+// -------------------------
+
+.input-checkbox {
+  vertical-align: middle;
+
+  & when (@use-custom-controls) {
+    -webkit-appearance: none;
+    display: inline-block;
+    position: relative;
+    width: @component-size;
+    height: @component-size;
+    font-size: inherit;
+    border-radius: @component-border-radius;
+    background-color: @component-background-color;
+    transition: background-color .16s cubic-bezier(0.5, 0.15, 0.2, 1);
+
+    &&:focus {
+      outline: 0; // TODO: Add it back
+    }
+    &:active {
+      background-color: @background-color-info;
+    }
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      top: @component-size * .75;
+      left: @component-size * .4;
+      height: 2px;
+      border-radius: 1px;
+      background-color: @base-background-color;
+      transform-origin: 0 0;
+      opacity: 0;
+      transition: transform .1s cubic-bezier(0.5, 0.15, 0.2, 1), opacity .1s cubic-bezier(0.5, 0.15, 0.2, 1);
+    }
+    &:before {
+      width: @component-size * .33;
+      transform: translate3d(0,0,0) rotate(225deg) scale(0);
+    }
+    &:after {
+      width: @component-size * .66;
+      margin: -1px;
+      transform: translate3d(0,0,0) rotate(-45deg) scale(0);
+      transition-delay: .05s;
+    }
+
+    &:checked {
+      background-color: @background-color-info;
+      &:active {
+        background-color: @component-background-color;
+      }
+      &:before {
+        opacity: 1;
+        transform: translate3d(0,0,0) rotate(225deg) scale(1);
+        transition-delay: .05s;
+      }
+      &:after {
+        opacity: 1;
+        transform: translate3d(0, 0, 0) rotate(-45deg) scale(1);
+        transition-delay: 0;
+      }
+    }
+
+    &:indeterminate {
+      background-color: @background-color-info;
+      &:active {
+        background-color: @component-background-color;
+      }
+      &:after {
+        opacity: 1;
+        transform: translate3d(@component-size * -.14, @component-size * -.25, 0) rotate(0deg) scale(1);
+        transition-delay: 0;
+      }
+    }
+  }
+}
+
+
+//
+// Color
+// -------------------------
+
+
+.input-color {
+  vertical-align: middle;
+
+  & when (@use-custom-controls) {
+    -webkit-appearance: none;
+    padding: 0;
+    width: @component-size * 2.5;
+    height: @component-size * 2.5;
+    border-radius: 50%;
+    border: 2px solid @input-border-color;
+    background-color: @input-background-color;
+    &::-webkit-color-swatch-wrapper { padding: 0; }
+    &::-webkit-color-swatch {
+      border: 1px solid hsla(0,0%,0%,.1);
+      border-radius: 50%;
+      transition: transform .16s cubic-bezier(0.5, 0.15, 0.2, 1);
+      &:active {
+        transition-duration: 0s;
+        transform: scale(.9);
+      }
+    }
+  }
+}
+
+
+
+//
+// Label
+// -------------------------
+
+.input-label {
+  .input-radio,
+  .input-checkbox,
+  .input-toggle {
+    margin-top: -.25em; // Vertical center (visually) - since most labels are upper case.
+    margin-right: @component-margin-side;
+  }
+}
+
+
+//
+// Number
+// -------------------------
+
+.input-number {
+  vertical-align: middle;
+
+  & when (@use-custom-controls) {
+    .input-field-mixin();
+    position: relative;
+    width: auto;
+    .platform-darwin & {
+      padding-right: 1.2em; // space for the spin button
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: menulist-button;
+        position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 1px;
+        width: calc(.6em ~'+' 9px); // magic numbers, OMG!
+        outline: 1px solid @input-background-color;
+        outline-offset: -1px; // reduces border radius (that can't be changed)
+        border-right: .2em solid @background-color-highlight; // a bit more padding
+        background-color: @background-color-highlight;
+        transition: transform .16s cubic-bezier(0.5, 0.15, 0.2, 1);
+        &:active {
+          transform: scale(.9);
+          transition-duration: 0s;
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Radio
+// -------------------------
+
+.input-radio {
+  vertical-align: middle;
+
+  & when (@use-custom-controls) {
+    -webkit-appearance: none;
+    display: inline-block;
+    position: relative;
+    width: @component-size;
+    height: @component-size;
+    font-size: inherit;
+    border-radius: 50%;
+    background-color: @component-background-color;
+    transition: background-color .16s cubic-bezier(0.5, 0.15, 0.2, 1);
+
+    &:before {
+      content: "";
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      border-radius: inherit;
+      border: @component-size/3 solid transparent;
+      background-clip: content-box;
+      background-color: @base-background-color;
+      transform: scale(0);
+      transition: transform .1s cubic-bezier(0.5, 0.15, 0.2, 1);
+    }
+    &&:focus {
+      outline: none;
+    }
+    &:active {
+      background-color: @background-color-info;
+    }
+    &:checked {
+      background-color: @background-color-info;
+      &:before {
+        transform: scale(1);
+      }
+    }
+  }
+}
+
+
+//
+// Range (Slider)
+// -------------------------
+
+.input-range {
+  & when (@use-custom-controls) {
+    -webkit-appearance: none;
+    margin: @component-padding 0;
+    height: 4px;
+    border-radius: @component-border-radius;
+    background-color: @component-background-color;
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: @component-size;
+      height: @component-size;
+      border-radius: 50%;
+      background-color: @background-color-info;
+      transition: transform .16s;
+      &:active {
+        transition-duration: 0s;
+        transform: scale(.9);
+      }
+    }
+  }
+}
+
+
+//
+// Search
+// -------------------------
+
+.input-search {
+  .input-block-mixin();
+  &&::-webkit-search-cancel-button {
+    -webkit-appearance: searchfield-cancel-button;
+  }
+
+  & when (@use-custom-controls) {
+    .input-field-mixin();
+  }
+}
+
+
+//
+// Select
+// -------------------------
+
+.input-select {
+  vertical-align: middle;
+
+  & when (@use-custom-controls) {
+    height: calc(@text-component-height ~'+' 2px); // + 2px? Magic!
+    border-radius: @component-border-radius;
+    border: 1px solid @button-border-color;
+    background-color: @button-background-color;
+  }
+}
+
+
+//
+// Text
+// -------------------------
+
+.input-text {
+  .input-block-mixin();
+
+  & when (@use-custom-controls) {
+    .input-field-mixin();
+  }
+}
+
+
+//
+// Text Area
+// -------------------------
+
+.input-textarea {
+  .input-block-mixin();
+
+  & when (@use-custom-controls) {
+    .input-field-mixin();
+  }
+}
+
+
+//
+// Toggle
+// -------------------------
+
+.input-toggle {
+  & when (@use-custom-controls) {
+    -webkit-appearance: none;
+    display: inline-block;
+    position: relative;
+    font-size: inherit;
+    width: @component-size * 2;
+    height: @component-size;
+    vertical-align: middle;
+    border-radius: 2em;
+    background-color: @component-background-color;
+    transition: background-color .2s cubic-bezier(0.5, 0.15, 0.2, 1);
+
+    &&:focus {
+      outline: 0;
+    }
+    &:checked {
+      background-color: @background-color-info;
+    }
+
+    // Thumb
+    &:before {
+      content: "";
+      position: absolute;
+      width: @component-size;
+      height: @component-size;
+      border-radius: inherit;
+      border: @component-size/4 solid transparent;
+      background-clip: content-box;
+      background-color: @base-background-color;
+      transition: transform .2s cubic-bezier(0.5, 0.15, 0.2, 1);
+    }
+    &:active:before {
+      opacity: .5;
+    }
+    &:checked:before {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+}
--- a/static/atom-ui/styles/layout.less
+++ b/static/atom-ui/styles/layout.less
@@ -0,0 +1,85 @@
+@import "ui-variables";
+@import "mixins/mixins";
+
+.padded {
+  padding: @component-padding;
+}
+
+// Blocks
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Must be div.block so as not to affect syntax highlighting.
+ul.block,
+div.block {
+  margin-bottom: @component-padding;
+}
+div > ul.block:last-child,
+div > div.block:last-child {
+  margin-bottom: 0;
+}
+
+// Inline Blocks
+
+.inline-block,
+.inline-block-tight {
+  display: inline-block;
+  vertical-align: middle;
+}
+.inline-block {
+  margin-right: @component-padding;
+}
+.inline-block-tight {
+  margin-right: @component-padding/2;
+}
+div > .inline-block:last-child,
+div > .inline-block-tight:last-child {
+  margin-right: 0;
+}
+
+.inline-block .inline-block {
+  vertical-align: top;
+}
+
+// Centering
+// -------------------------
+
+.pull-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Floats
+// -------------------------
+
+// Use left margin when it's in a float: right element.
+// Sets the margin correctly when inline blocks are hidden and shown.
+.pull-right {
+  float: right !important;
+
+  .inline-block {
+    margin-right: 0;
+    margin-left: @component-padding;
+  }
+  .inline-block-tight {
+    margin-right: 0;
+    margin-left: @component-padding/2;
+  }
+
+  > .inline-block:first-child,
+  > .inline-block-tight:first-child {
+    margin-left: 0;
+  }
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.clearfix {
+  .clearfix();
+}
--- a/static/atom-ui/styles/lists.less
+++ b/static/atom-ui/styles/lists.less
@@ -0,0 +1,291 @@
+@import "variables/variables";
+@import "ui-variables";
+@import "mixins/mixins";
+
+@import "octicon-mixins";
+
+//
+// List options
+// --------------------------------------------------
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  margin-left: -5px;
+
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+
+//
+// List groups
+// --------------------------------------------------
+
+// Mixins
+
+.list-group-item-variant(@state; @background; @color) {
+  .list-group-item-@{state} {
+    color: @color;
+    background-color: @background;
+
+    a&,
+    button& {
+      color: @color;
+
+      .list-group-item-heading {
+        color: inherit;
+      }
+
+      &:hover,
+      &:focus {
+        color: @color;
+        background-color: darken(@background, 5%);
+      }
+      &.active,
+      &.active:hover,
+      &.active:focus {
+        color: #fff;
+        background-color: @color;
+        border-color: @color;
+      }
+    }
+  }
+}
+
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  background-color: @list-group-bg;
+  border: 1px solid @list-group-border;
+
+  // Round the first and last items
+  &:first-child {
+    .border-top-radius(@list-group-border-radius);
+  }
+  &:last-child {
+    margin-bottom: 0;
+    .border-bottom-radius(@list-group-border-radius);
+  }
+}
+
+
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
+// Includes an extra `.active` modifier class for showing selected items.
+
+a.list-group-item,
+button.list-group-item {
+  color: @list-group-link-color;
+
+  .list-group-item-heading {
+    color: @list-group-link-heading-color;
+  }
+
+  // Hover state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @list-group-link-hover-color;
+    background-color: @list-group-hover-bg;
+  }
+}
+
+button.list-group-item {
+  width: 100%;
+  text-align: left;
+}
+
+.list-group-item {
+  // Disabled state
+  &.disabled,
+  &.disabled:hover,
+  &.disabled:focus {
+    background-color: @list-group-disabled-bg;
+    color: @list-group-disabled-color;
+    cursor: @cursor-disabled;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-disabled-text-color;
+    }
+  }
+
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: @list-group-active-color;
+    background-color: @list-group-active-bg;
+    border-color: @list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-active-text-color;
+    }
+  }
+}
+
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+.list-group-item-variant(success; @state-success-bg; @state-success-text);
+.list-group-item-variant(info; @state-info-bg; @state-info-text);
+.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
+.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
+
+
+// Custom content options
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+
+
+// This is a bootstrap override
+// ---------------------------------------------
+
+.list-group,
+.list-group .list-group-item {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  position: static;
+}
+
+.list-group,
+.list-tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  cursor: default;
+
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
+    line-height: @component-line-height;
+    text-wrap: none;
+    white-space: nowrap;
+  }
+
+  // The background highlight uses ::before rather than the item background so
+  // it can span the entire width of the parent container rather than the size
+  // of the list item.
+  .selected::before {
+    content: '';
+    background-color: @background-color-selected;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: @component-line-height;
+  }
+
+  // Make sure the background highlight is below the content.
+  .selected > * {
+    position: relative;
+  }
+
+  .icon::before {
+    margin-right: @component-icon-padding;
+    position: relative;
+    top: 1px;
+  }
+  .no-icon {
+    padding-left: @component-icon-padding + @component-icon-size;
+  }
+}
+
+
+
+//
+// List Tree
+// --------------------------------------------------
+
+// Handle indentation of the tree. Assume disclosure arrows.
+
+.list-tree {
+  .list-nested-item > .list-tree > li,
+  .list-nested-item > .list-group > li {
+    padding-left: @component-icon-size + @component-icon-padding;
+  }
+
+  &.has-collapsable-children {
+    @disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;
+    li.list-item {
+      margin-left: @disclosure-arrow-padding;
+    }
+
+    .list-nested-item.collapsed > .list-group,
+    .list-nested-item.collapsed > .list-tree {
+      display: none;
+    }
+
+    // Nested items always get disclosure arrows
+    .list-nested-item > .list-item {
+      .octicon(chevron-down, @disclosure-arrow-size);
+      &::before{
+        position: relative;
+        top: -1px;
+        margin-right: @component-icon-padding;
+      }
+    }
+    .list-nested-item.collapsed > .list-item {
+      .octicon(chevron-right, @disclosure-arrow-size);
+      &::before{
+        left: 1px;
+      }
+    }
+
+    .list-nested-item > .list-tree > li,
+    .list-nested-item > .list-group > li {
+      padding-left: @disclosure-arrow-padding;
+    }
+
+    // You want a subtree to be flat -- no collapsable children
+    .has-flat-children,
+    &.has-flat-children {
+      li.list-item {
+        margin-left: 0;
+      }
+    }
+  }
+}
--- a/static/atom-ui/styles/loading.less
+++ b/static/atom-ui/styles/loading.less
@@ -0,0 +1,21 @@
+//
+// Loading
+// --------------------------------------------------
+
+.loading-spinner(@size) {
+  display: block;
+  width: @size;
+  height: @size;
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &.inline-block {
+    display: inline-block;
+  }
+}
+
+.loading-spinner-tiny   { .loading-spinner(16px); }
+.loading-spinner-small  { .loading-spinner(32px); }
+.loading-spinner-medium { .loading-spinner(48px); }
+.loading-spinner-large  { .loading-spinner(64px); }
--- a/static/atom-ui/styles/messages.less
+++ b/static/atom-ui/styles/messages.less
@@ -0,0 +1,41 @@
+@import "ui-variables";
+
+.info-messages,
+.error-messages {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.error-messages {
+  color: @text-color-error;
+}
+
+ul.background-message {
+  font-size: @font-size * 3;
+
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &.centered {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    align-items: center;
+    text-align: center;
+
+    li {
+      width: 100%;
+    }
+  }
+}
--- a/static/atom-ui/styles/mixins/mixins.less
+++ b/static/atom-ui/styles/mixins/mixins.less
@@ -0,0 +1,88 @@
+@import "ui-variables";
+
+// Core mixins
+// ----------------------------------------
+
+// Focus
+//
+.tab-focus() {
+  outline: 2px auto @text-color-info;
+  outline-offset: -2px;
+}
+
+
+// Border-radius
+//
+.border-top-radius(@radius) {
+  border-top-right-radius: @radius;
+  border-top-left-radius: @radius;
+}
+.border-right-radius(@radius) {
+  border-bottom-right-radius: @radius;
+  border-top-right-radius: @radius;
+}
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius;
+  border-bottom-left-radius: @radius;
+}
+.border-left-radius(@radius) {
+  border-bottom-left-radius: @radius;
+  border-top-left-radius: @radius;
+}
+
+
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+.clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+
+// CSS image replacement
+//
+// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (has been removed in v4)
+.hide-text() {
+  font: ~"0/0" a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+// New mixin to use as of v3.0.1
+.text-hide() {
+  .hide-text();
+}
+
+
+// Text overflow
+// Requires inline-block or block for proper styling
+
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
--- a/static/atom-ui/styles/modals.less
+++ b/static/atom-ui/styles/modals.less
@@ -0,0 +1,83 @@
+@import "ui-variables";
+
+//
+// Modals
+// --------------------------------------------------
+
+.overlay, // deprecated .overlay
+atom-panel.modal {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 50%;
+  width: 500px;
+  margin-left: -250px;
+  z-index: 9999;
+  box-sizing: border-box;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  color: @text-color;
+  background-color: @overlay-background-color;
+
+  padding: 10px;
+
+  // shrink modals when window gets narrow
+  @media (max-width: 500px) {
+    & {
+      width: 100%;
+      left: 0;
+      margin-left: 0;
+    }
+  }
+
+  h1 {
+    margin-top: 0;
+    color: @text-color-highlight;
+    font-size: 1.6em;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+
+  atom-text-editor[mini] {
+    margin-bottom: 10px;
+  }
+
+  .message {
+    padding-top: 5px;
+    font-size: 11px;
+  }
+
+  &.mini {
+    width: 200px;
+    margin-left: -100px;
+    font-size: 12px;
+  }
+}
+
+
+// Deprecated: overlay, from-top, from-bottom, floating
+// --------------------------------------------------
+// TODO: Remove these!
+
+.overlay.from-top {
+  top: 0;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.overlay.from-bottom {
+  bottom: 0;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.overlay.floating {
+  left: auto;
+}
--- a/static/atom-ui/styles/panels.less
+++ b/static/atom-ui/styles/panels.less
@@ -0,0 +1,38 @@
+@import "ui-variables";
+
+//
+// Panels
+// --------------------------------------------------
+
+.tool-panel, // deprecated: .tool-panel
+.panel, // deprecated: .panel
+atom-panel {
+  background-color: @tool-panel-background-color;
+}
+
+.inset-panel {
+  border-radius: @component-border-radius;
+  background-color: @inset-panel-background-color;
+}
+
+.panel-heading {
+  margin: 0;
+  padding: @component-padding;
+  border-radius: 0;
+  font-size: @font-size;
+  line-height: 1;
+  background-color: @panel-heading-background-color;
+
+  .inset-panel & {
+    border-radius: @component-border-radius @component-border-radius 0 0;
+  }
+
+  .btn {
+    @btn-height: @component-line-height - 5px;
+    height: @btn-height;
+    line-height: @btn-height;
+    font-size: @font-size - 2px;
+    position: relative;
+    top: -5px;
+  }
+}
--- a/static/atom-ui/styles/private/README.md
+++ b/static/atom-ui/styles/private/README.md
@@ -0,0 +1,5 @@
+# Private components
+
+> Private! Don't use these in packages.
+
+If you need something, feel free to open an issue and it might can be made public.
--- a/static/atom-ui/styles/private/alerts.less
+++ b/static/atom-ui/styles/private/alerts.less
@@ -0,0 +1,114 @@
+@import "../variables/variables";
+@import "ui-variables";
+
+//
+// Alerts
+// --------------------------------------------------
+
+//## Define alert colors, border radius, and padding.
+
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
+@alert-warning-bg:            @state-warning-bg;
+@alert-warning-text:          @state-warning-text;
+@alert-warning-border:        @state-warning-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+
+//## variant mixin
+
+.alert-variant(@background; @border; @text-color) {
+  background-color: @background;
+  border-color: @border;
+  color: @text-color;
+
+  hr {
+    border-top-color: darken(@border, 5%);
+  }
+  .alert-link {
+    color: darken(@text-color, 10%);
+  }
+}
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: @alert-padding;
+  margin-bottom: @line-height-computed;
+  border: 1px solid transparent;
+  border-radius: @alert-border-radius;
+
+  // Headings for larger alerts
+  h4 {
+    margin-top: 0;
+    // Specified for the h4 to prevent conflicts of changing @headings-color
+    color: inherit;
+  }
+
+  // Provide class for links that match alerts
+  .alert-link {
+    font-weight: @alert-link-font-weight;
+  }
+
+  // Improve alignment and spacing of inner content
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+
+  > p + p {
+    margin-top: 5px;
+  }
+}
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
+.alert-dismissible {
+  padding-right: (@alert-padding + 20);
+
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    color: inherit;
+  }
+}
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+.alert-success {
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
+}
+
+.alert-info {
+  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
+}
+
+.alert-warning {
+  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
+}
+
+.alert-danger {
+  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
+}
--- a/static/atom-ui/styles/private/close.less
+++ b/static/atom-ui/styles/private/close.less
@@ -0,0 +1,38 @@
+//
+// Close icon (deprecated)
+// --------------------------------------------------
+
+.close {
+  @font-size-base:              14px;
+  @close-font-weight:           bold;
+  @close-color:                 #000;
+  @close-text-shadow:           0 1px 0 #fff;
+
+  float: right;
+  font-size: (@font-size-base * 1.5);
+  font-weight: @close-font-weight;
+  line-height: 1;
+  color: @close-color;
+  text-shadow: @close-text-shadow;
+  opacity: .2;
+
+  &:hover,
+  &:focus {
+    color: @close-color;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: .5;
+  }
+
+  // Additional properties for button version
+  // iOS requires the button element instead of an anchor tag.
+  // If you want the anchor version, it requires `href="#"`.
+  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+  button& {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
+}
--- a/static/atom-ui/styles/private/code.less
+++ b/static/atom-ui/styles/private/code.less
@@ -0,0 +1,77 @@
+@import "../variables/variables";
+@import "ui-variables";
+
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+@code-color: @text-color-highlight;
+@code-bg: @background-color-highlight;
+
+@pre-color:                   @code-color;
+@pre-bg:                      @code-bg;
+@pre-border-color:            @base-border-color;
+@pre-scrollable-max-height:   340px;
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: @font-family-monospace;
+}
+
+// Inline code
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: @code-color;
+  background-color: @code-bg;
+  border-radius: @border-radius-base;
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: @code-color;
+  background-color: @code-bg;
+  border-radius: @border-radius-small;
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: bold;
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: ((@line-height-computed - 1) / 2);
+  margin: 0 0 (@line-height-computed / 2);
+  font-size: (@font-size-base - 1); // 14px to 13px
+  line-height: @line-height-base;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: @pre-color;
+  background-color: @pre-bg;
+  border: 1px solid @pre-border-color;
+  border-radius: @border-radius-base;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: @pre-scrollable-max-height;
+  overflow-y: scroll;
+}
--- a/static/atom-ui/styles/private/forms.less
+++ b/static/atom-ui/styles/private/forms.less
@@ -0,0 +1,705 @@
+@import "../variables/variables";
+@import "ui-variables";
+@import "../mixins/mixins";
+
+//
+// Forms
+// --------------------------------------------------
+
+
+@input-bg:                       #fff; //** `<input>` background color
+@input-bg-disabled:              @gray-lighter; //** `<input disabled>` background color
+@input-color:                    @gray; //** Text color for `<input>`s
+@input-border:                   #ccc; //** `<input>` border color
+
+// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+@input-border-radius:            @border-radius-base; //** Large `.form-control` border radius
+@input-border-radius-large:      @border-radius-large; //** Small `.form-control` border radius
+@input-border-radius-small:      @border-radius-small;
+@input-border-focus:             #66afe9; //** Border color for inputs on focus
+@input-color-placeholder:        #999; //** Placeholder text color
+@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2); //** Default `.form-control` height
+@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); //** Large `.form-control` height
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); //** Small `.form-control` height
+
+@form-group-margin-bottom:       15px; //** `.form-group` margin
+
+@legend-color:                   @gray-dark;
+@legend-border-color:            #e5e5e5;
+
+@input-group-addon-bg:           @gray-lighter; //** Background color for textual input addons
+@input-group-addon-border-color: @input-border; //** Border color for textual input addons
+
+@cursor-disabled:                not-allowed; //** Disabled cursor for form controls and buttons.
+
+@grid-gutter-width:         30px; //** Padding between columns. Gets divided in half for the left and right.
+
+
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label  {
+    color: @text-color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: @border-color;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
+    &:focus {
+      border-color: darken(@border-color, 10%);
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+    }
+  }
+  // Set validation states also for addons
+  .input-group-addon {
+    color: @text-color;
+    border-color: @border-color;
+    background-color: @background-color;
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: @text-color;
+  }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-border-focus` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+
+  select& {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea&,
+  select[multiple]& {
+    height: auto;
+  }
+}
+
+// Placeholder text
+.placeholder(@color: @input-color-placeholder) {
+  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+}
+
+// Creates a wrapper for a series of columns
+.make-row(@gutter: @grid-gutter-width) {
+  margin-left:  ceil((@gutter / -2));
+  margin-right: floor((@gutter / -2));
+  &:extend(.clearfix all);
+}
+
+
+// -----------------------------------------------------
+
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+  // so we reset that to ensure it behaves more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359.
+  min-width: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: @line-height-computed;
+  font-size: (@font-size-base * 1.5);
+  line-height: inherit;
+  color: @legend-color;
+  border: 0;
+  border-bottom: 1px solid @legend-border-color;
+}
+
+label {
+  display: inline-block;
+  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+
+// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+  box-sizing: border-box;
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9; // IE8-9
+  line-height: normal;
+}
+
+input[type="file"] {
+  display: block;
+}
+
+// Make range inputs behave like textual form controls
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Focus for file, radio, and checkbox
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  .tab-focus();
+}
+
+// Adjust output element
+output {
+  display: block;
+  padding-top: (@padding-base-vertical + 1);
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+}
+
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+  background-color: @input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid @input-border;
+  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();
+
+  // Placeholder
+  .placeholder();
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    border: 0;
+    background-color: transparent;
+  }
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-bg-disabled;
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: @form-group-margin-bottom;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: @cursor-disabled;
+    }
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: (@padding-base-vertical + 1);
+  padding-bottom: (@padding-base-vertical + 1);
+  // Remove default margin from `p`
+  margin-bottom: 0;
+  min-height: (@line-height-computed + @font-size-base);
+
+  &.input-lg,
+  &.input-sm {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.input-sm {
+  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: @input-height-small;
+    padding: @padding-small-vertical @padding-small-horizontal;
+    font-size: @font-size-small;
+    line-height: @line-height-small;
+    border-radius: @input-border-radius-small;
+  }
+  select.form-control {
+    height: @input-height-small;
+    line-height: @input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-small;
+    min-height: (@line-height-computed + @font-size-small);
+    padding: (@padding-small-vertical + 1) @padding-small-horizontal;
+    font-size: @font-size-small;
+    line-height: @line-height-small;
+  }
+}
+
+.input-lg {
+  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: @input-height-large;
+    padding: @padding-large-vertical @padding-large-horizontal;
+    font-size: @font-size-large;
+    line-height: @line-height-large;
+    border-radius: @input-border-radius-large;
+  }
+  select.form-control {
+    height: @input-height-large;
+    line-height: @input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-large;
+    min-height: (@line-height-computed + @font-size-large);
+    padding: (@padding-large-vertical + 1) @padding-large-horizontal;
+    font-size: @font-size-large;
+    line-height: @line-height-large;
+  }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.has-feedback {
+  // Enable absolute positioning
+  position: relative;
+
+  // Ensure icons don't overlap text
+  .form-control {
+    padding-right: (@input-height-base * 1.25);
+  }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2; // Ensure icon is above input groups
+  display: block;
+  width: @input-height-base;
+  height: @input-height-base;
+  line-height: @input-height-base;
+  text-align: center;
+  pointer-events: none;
+}
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback,
+.form-group-lg .form-control + .form-control-feedback {
+  width: @input-height-large;
+  height: @input-height-large;
+  line-height: @input-height-large;
+}
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback,
+.form-group-sm .form-control + .form-control-feedback {
+  width: @input-height-small;
+  height: @input-height-small;
+  line-height: @input-height-small;
+}
+
+// Feedback states
+.has-success {
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
+.has-warning {
+  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+}
+.has-error {
+  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+}
+
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
+
+  & ~ .form-control-feedback {
+    top: (@line-height-computed + 5); // Height of the `label` and its margin
+  }
+  &.sr-only ~ .form-control-feedback {
+    top: 0;
+  }
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+  display: block; // account for any element using help-block
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+  // Kick in the inline
+  @media (min-width: @screen-sm-min) {
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // In navbar-form, allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-static {
+      display: inline-block;
+    }
+
+    .input-group {
+      display: inline-table;
+      vertical-align: middle;
+
+      .input-group-addon,
+      .input-group-btn,
+      .form-control {
+        width: auto;
+      }
+    }
+
+    // Input groups need that 100% width though
+    .input-group > .form-control {
+      width: 100%;
+    }
+
+    .control-label {
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match.
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      vertical-align: middle;
+
+      label {
+        padding-left: 0;
+      }
+    }
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      position: relative;
+      margin-left: 0;
+    }
+
+    // Re-override the feedback icon.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
+  }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: (@line-height-computed + (@padding-base-vertical + 1));
+  }
+
+  // Make form groups behave like rows
+  .form-group {
+    .make-row();
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: @screen-sm-min) {
+    .control-label {
+      text-align: right;
+      margin-bottom: 0;
+      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+  // Validation states
+  //
+  // Reposition the icon because it's now within a grid column and columns have
+  // `position: relative;` on them. Also accounts for the grid gutter padding.
+  .has-feedback .form-control-feedback {
+    right: floor((@grid-gutter-width / 2));
+  }
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@padding-large-vertical + 1);
+        font-size: @font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@padding-small-vertical + 1);
+        font-size: @font-size-small;
+      }
+    }
+  }
+}
--- a/static/atom-ui/styles/private/links.less
+++ b/static/atom-ui/styles/private/links.less
@@ -0,0 +1,18 @@
+@import "ui-variables";
+@import "../mixins/mixins";
+
+// Links
+
+a {
+  cursor: pointer;
+  color: @text-color-highlight;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    color: @text-color-highlight;
+    text-decoration: underline;
+  }
+  &:focus {
+    .tab-focus();
+  }
+}
--- a/static/atom-ui/styles/private/navs.less
+++ b/static/atom-ui/styles/private/navs.less
@@ -0,0 +1,275 @@
+@import "../variables/variables";
+@import "ui-variables";
+@import "../mixins/mixins";
+
+//
+// Navs
+// --------------------------------------------------
+
+//=== Shared nav styles
+@nav-link-padding:                            10px 15px;
+@nav-link-hover-bg:                           @gray-lighter;
+@nav-disabled-link-color:                     @gray-light;
+@nav-disabled-link-hover-color:               @gray-light;
+
+//== Tabs
+@nav-tabs-border-color:                       #ddd;
+@nav-tabs-link-hover-border-color:            @gray-lighter;
+@nav-tabs-active-link-hover-bg:               @body-bg;
+@nav-tabs-active-link-hover-color:            @gray;
+@nav-tabs-active-link-hover-border-color:     #ddd;
+@nav-tabs-justified-link-border-color:        #ddd;
+@nav-tabs-justified-active-link-border-color: @body-bg;
+
+//== Pills
+@nav-pills-border-radius:                     @border-radius-base;
+@nav-pills-active-link-hover-bg:              @component-active-bg;
+@nav-pills-active-link-hover-color:           @component-active-color;
+
+
+.nav-divider(@color: #e5e5e5) {
+  height: 1px;
+  margin: ((@line-height-computed / 2) - 1) 0;
+  overflow: hidden;
+  background-color: @color;
+}
+
+
+// Base class
+// --------------------------------------------------
+
+.nav {
+  margin-bottom: 0;
+  padding-left: 0; // Override default ul/ol
+  list-style: none;
+  &:extend(.clearfix all);
+
+  > li {
+    position: relative;
+    display: block;
+
+    > a {
+      position: relative;
+      display: block;
+      padding: @nav-link-padding;
+      border-radius: @component-border-radius;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: @background-color-highlight;
+      }
+    }
+
+    // Disabled state sets text to gray and nukes hover/tab effects
+    &.disabled > a {
+      color: @nav-disabled-link-color;
+
+      &:hover,
+      &:focus {
+        color: @nav-disabled-link-hover-color;
+        text-decoration: none;
+        background-color: transparent;
+        cursor: @cursor-disabled;
+      }
+    }
+  }
+
+  // Open dropdowns
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: @nav-link-hover-bg;
+      border-color: @link-color;
+    }
+  }
+
+  // Nav dividers (deprecated with v3.0.1)
+  //
+  // This should have been removed in v3 with the dropping of `.nav-list`, but
+  // we missed it. We don't currently support this anywhere, but in the interest
+  // of maintaining backward compatibility in case you use it, it's deprecated.
+  .nav-divider {
+    .nav-divider();
+  }
+
+  // Prevent IE8 from misplacing imgs
+  //
+  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+  > li > a > img {
+    max-width: none;
+  }
+}
+
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid @nav-tabs-border-color;
+  > li {
+    float: left;
+    // Make the list-items overlay the bottom border
+    margin-bottom: -1px;
+
+    // Actual tabs (as links)
+    > a {
+      margin-right: 2px;
+      line-height: @line-height-base;
+      border: 1px solid transparent;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+      &:hover {
+        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
+      }
+    }
+
+    // Active state, and its :hover to override normal :hover
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-tabs-active-link-hover-color;
+        background-color: @nav-tabs-active-link-hover-bg;
+        border: 1px solid @nav-tabs-active-link-hover-border-color;
+        border-bottom-color: transparent;
+        cursor: default;
+      }
+    }
+  }
+  // pulling this in mainly for less shorthand
+  &.nav-justified {
+    .nav-justified();
+    .nav-tabs-justified();
+  }
+}
+
+
+// Pills
+// -------------------------
+.nav-pills {
+  > li {
+    float: left;
+
+    // Links rendered as pills
+    > a {
+      border-radius: @nav-pills-border-radius;
+    }
+    + li {
+      margin-left: 2px;
+    }
+
+    // Active state
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-pills-active-link-hover-color;
+        background-color: @background-color-selected;
+      }
+    }
+  }
+}
+
+
+// Stacked pills
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      margin-top: 2px;
+      margin-left: 0; // no need for this gap between nav items
+    }
+  }
+}
+
+
+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  width: 100%;
+
+  > li {
+    float: none;
+    > a {
+      text-align: center;
+      margin-bottom: 5px;
+    }
+  }
+
+  > .dropdown .dropdown-menu {
+    top: auto;
+    left: auto;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    > li {
+      display: table-cell;
+      width: 1%;
+      > a {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+.nav-tabs-justified {
+  border-bottom: 0;
+
+  > li > a {
+    // Override margin from .nav-tabs
+    margin-right: 0;
+    border-radius: @border-radius-base;
+  }
+
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    border: 1px solid @nav-tabs-justified-link-border-color;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    > li > a {
+      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      border-bottom-color: @nav-tabs-justified-active-link-border-color;
+    }
+  }
+}
+
+
+// Tabbable tabs
+// -------------------------
+
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
+  }
+}
+
+
+// Dropdowns
+// -------------------------
+
+// Specific dropdowns
+.nav-tabs .dropdown-menu {
+  // make dropdown border overlap tab border
+  margin-top: -1px;
+  // Remove the top rounded corners here since there is a hard edge above the menu
+  .border-top-radius(0);
+}
--- a/static/atom-ui/styles/private/scaffolding.less
+++ b/static/atom-ui/styles/private/scaffolding.less
@@ -0,0 +1,55 @@
+@import "../variables/variables";
+@import "ui-variables";
+@import "../mixins/mixins";
+
+//
+// Scaffolding
+// --------------------------------------------------
+
+// Remove focus style, be sure to add them back where useful
+:focus {
+  outline: none;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+
+// Figures
+//
+// We reset this here because previously Normalize had no `figure` margins. This
+// ensures we don't break anyone's use of the element.
+
+figure {
+  margin: 0;
+}
+
+
+// Images
+
+img {
+  vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  display: block;
+  max-width: 100%; // Set a maximum relative to the parent
+}
+
+
+// Horizontal rules
+
+hr {
+  margin-top:    @line-height-computed;
+  margin-bottom: @line-height-computed;
+  border: 0;
+  border-top: 1px solid @hr-border;
+}
--- a/static/atom-ui/styles/private/sections.less
+++ b/static/atom-ui/styles/private/sections.less
@@ -0,0 +1,38 @@
+@import "ui-variables";
+
+// Deprecated
+// These selectors are too vague and should be used directly in Settings and Styleguide
+
+section, .section {
+  position: relative;
+  margin-top: 0;
+  &:last-child { margin-bottom: 0; }
+
+  &.bordered {
+    margin: 0;
+    padding: @component-padding*2 0;
+    border-top: 1px solid @background-color-highlight;
+    border-bottom: 1px solid @tool-panel-border-color;
+  }
+
+  .section-heading:first-child {
+    margin-top: 0;
+    font-weight: bold;
+    color: @text-color-highlight;
+  }
+}
+
+div > section:first-child,
+form > section:first-child,
+div > .section:first-child,
+form > .section:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+div > section:last-child,
+form > section:last-child,
+div > .section:last-child,
+form > .section:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
--- a/static/atom-ui/styles/private/tables.less
+++ b/static/atom-ui/styles/private/tables.less
@@ -0,0 +1,208 @@
+@import "../variables/variables";
+@import "ui-variables";
+
+//
+// Tables
+// --------------------------------------------------
+
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+@table-cell-padding:            8px; //** Padding for `<th>`s and `<td>`s.
+@table-condensed-cell-padding:  5px; //** Padding for cells in `.table-condensed`.
+@table-bg:                      transparent; //** Default background color used for all tables.
+@table-bg-accent:               #f9f9f9; //** Background color used for `.table-striped`.
+@table-bg-hover:                #f5f5f5; //** Background color used for `.table-hover`.
+@table-bg-active:               @table-bg-hover;
+@table-border-color:            #ddd; //** Border color for table and cell borders.
+
+
+
+// Variant mixin
+
+.table-row-variant(@state; @background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.@{state},
+    > th.@{state},
+    &.@{state} > td,
+    &.@{state} > th {
+      background-color: @background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td,
+    &:hover > .@{state},
+    &.@{state}:hover > th {
+      background-color: darken(@background, 5%);
+    }
+  }
+}
+
+
+// Global overrides
+
+table {
+  background-color: @table-bg;
+}
+caption {
+  padding-top: @table-cell-padding;
+  padding-bottom: @table-cell-padding;
+  color: @text-muted;
+  text-align: left;
+}
+th {
+  text-align: left;
+}
+
+
+// Baseline styles
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: @line-height-computed;
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: @table-cell-padding;
+        line-height: @line-height-base;
+        vertical-align: top;
+        border-top: 1px solid @table-border-color;
+      }
+    }
+  }
+  // Bottom align for column headings
+  > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid @table-border-color;
+  }
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+  // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid @table-border-color;
+  }
+
+  // Nesting
+  .table {
+    background-color: @body-bg;
+  }
+}
+
+
+// Condensed table w/ half padding
+
+.table-condensed {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: @table-condensed-cell-padding;
+      }
+    }
+  }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+  border: 1px solid @table-border-color;
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        border: 1px solid @table-border-color;
+      }
+    }
+  }
+  > thead > tr {
+    > th,
+    > td {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  > tbody > tr:nth-of-type(odd) {
+    background-color: @table-bg-accent;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover {
+    background-color: @table-bg-hover;
+  }
+}
+
+
+// Table cell sizing
+//
+// Reset default table behavior
+
+table col[class*="col-"] {
+  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+  float: none;
+  display: table-column;
+}
+table {
+  td,
+  th {
+    &[class*="col-"] {
+      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+      float: none;
+      display: table-cell;
+    }
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+// Generate the contextual variants
+.table-row-variant(active; @table-bg-active);
+.table-row-variant(success; @state-success-bg);
+.table-row-variant(info; @state-info-bg);
+.table-row-variant(warning; @state-warning-bg);
+.table-row-variant(danger; @state-danger-bg);
--- a/static/atom-ui/styles/private/utilities.less
+++ b/static/atom-ui/styles/private/utilities.less
@@ -0,0 +1,60 @@
+@import "ui-variables";
+@import "../mixins/mixins";
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  .text-hide();
+}
+
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
--- a/static/atom-ui/styles/select-list.less
+++ b/static/atom-ui/styles/select-list.less
@@ -0,0 +1,57 @@
+@import "ui-variables";
+@import "octicon-mixins";
+
+.select-list {
+  .loading {
+    .loading-message {
+      .octicon(hourglass);
+
+      &:before {
+        font-size: 1.1em;
+        width: 1.1em;
+        height: 1.1em;
+        margin-right: 5px;
+      }
+    }
+
+    .badge {
+      margin-left: 10px;
+    }
+  }
+
+  ol.list-group {
+    position: relative;
+    overflow-y: auto;
+    max-height: 312px;
+    margin: @component-padding 0 0 0;
+    padding: 0;
+
+    li {
+      display: block;
+
+      .primary-line,
+      .secondary-line {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+
+// Popover List
+
+.select-list.popover-list {
+  width: 200px;
+  min-width: 200px;
+  margin-left: 0;
+  position: relative;
+  background-color: @overlay-background-color;
+
+  ol.list-group {
+    position: relative;
+    overflow-y: scroll;
+    max-height: 200px;
+  }
+}
--- a/static/atom-ui/styles/site-colors.less
+++ b/static/atom-ui/styles/site-colors.less
@@ -0,0 +1,11 @@
+@import "ui-variables";
+
+//
+// Site colors
+// --------------------------------------------------
+
+.ui-site-1 { background-color: @ui-site-color-1; }
+.ui-site-2 { background-color: @ui-site-color-2; }
+.ui-site-3 { background-color: @ui-site-color-3; }
+.ui-site-4 { background-color: @ui-site-color-4; }
+.ui-site-5 { background-color: @ui-site-color-5; }
--- a/static/atom-ui/styles/text.less
+++ b/static/atom-ui/styles/text.less
@@ -0,0 +1,269 @@
+@import "variables/variables";
+@import "ui-variables";
+@import "mixins/mixins";
+
+//
+// Typography
+// --------------------------------------------------
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+@headings-font-family:    inherit;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+// Mixins
+// -------------------------
+
+.text-variant(@type) {
+  @text-color-name: "text-color-@{type}";
+  @bg-color-name: "background-color-@{type}";
+
+  @text-color: @@text-color-name;
+  @bg-color: @@bg-color-name;
+
+  color: @text-color;
+  a&:hover,
+  a&:focus {
+    color: darken(@text-color, 10%);
+  }
+
+  code {
+    color: @text-color;
+    background: fadeout(@bg-color, 80%);
+  }
+
+  a, a code {
+    text-decoration: underline;
+    color: darken(@text-color, 10%);
+
+    &:hover {
+      color: darken(@text-color, 15%);
+    }
+  }
+}
+
+.bg-variant(@color) {
+  background-color: @color;
+  a&:hover,
+  a&:focus {
+    background-color: darken(@color, 10%);
+  }
+}
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @headings-line-height;
+  color: @headings-color;
+
+  small,
+  .small {
+    font-weight: normal;
+    line-height: 1;
+    color: @headings-small-color;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+h1, .h1 { font-size: @font-size-h1; }
+h2, .h2 { font-size: @font-size-h2; }
+h3, .h3 { font-size: @font-size-h3; }
+h4, .h4 { font-size: @font-size-h4; }
+h5, .h5 { font-size: @font-size-h5; }
+h6, .h6 { font-size: @font-size-h6; }
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 (@line-height-computed / 2);
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+.text-smaller,
+small,
+.small {
+  font-size: floor((100% * @font-size-small / @font-size-base));
+}
+
+mark,
+.mark {
+  background-color: @state-warning-bg;
+  padding: .2em;
+}
+
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+.text-nowrap         { white-space: nowrap; }
+
+// Transformation
+.text-lowercase      { text-transform: lowercase; }
+.text-uppercase      { text-transform: uppercase; }
+.text-capitalize     { text-transform: capitalize; }
+
+// text-classes
+.text-subtle, .text-muted { color: @text-color-subtle; }
+.text-highlight           { color: @text-color-highlight; }
+
+// Contextual colors
+.text-info, .text-primary { .text-variant(info); }
+.text-success             { .text-variant(success); }
+.text-warning             { .text-variant(warning); }
+.text-error, .text-danger { .text-variant(error); }
+
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+  // Given the contrast here, this is the only class to have its color inverted
+  // automatically.
+  color: #fff;
+  .bg-variant(@brand-primary);
+}
+.bg-success {
+  .bg-variant(@state-success-bg);
+}
+.bg-info {
+  .bg-variant(@state-info-bg);
+}
+.bg-warning {
+  .bg-variant(@state-warning-bg);
+}
+.bg-danger {
+  .bg-variant(@state-danger-bg);
+}
+
+
+// Highlight
+// -------------------------
+
+.highlight() {
+  font-weight: bold;
+  border-radius: @component-border-radius;
+}
+
+.highlight {
+  .highlight();
+  color: @text-color-highlight;
+  background-color: @background-color-highlight;
+}
+
+.highlight-color(@name, @color) {
+  .highlight-@{name} {
+    .highlight();
+    color: #fff;
+    background-color: fadeout(@color, 50%);
+  }
+}
+
+.highlight-color(info,    @background-color-info);
+.highlight-color(warning, @background-color-warning);
+.highlight-color(error,   @background-color-error);
+.highlight-color(success, @background-color-success);
+
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: (@line-height-computed / 2);
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: @line-height-computed;
+}
+dt,
+dd {
+  line-height: @line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+
+// Misc
+// -------------------------
+
+// Abbreviations and acronyms
+abbr[title],
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted @abbr-border-color;
+}
+
+// Blockquotes
+blockquote {
+  padding: (@line-height-computed / 2) @line-height-computed;
+  margin: 0 0 @line-height-computed;
+  font-size: @blockquote-font-size;
+  border-left: 5px solid @blockquote-border-color;
+
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Addresses
+address {
+  margin-bottom: @line-height-computed;
+  font-style: normal;
+  line-height: @line-height-base;
+}
--- a/static/atom-ui/styles/tooltip.less
+++ b/static/atom-ui/styles/tooltip.less
@@ -0,0 +1,112 @@
+@import "ui-variables";
+
+//
+// Tooltips
+// --------------------------------------------------
+
+@tooltip-max-width:           200px; //** Tooltip max width
+@tooltip-color:               #fff; //** Tooltip text color
+@tooltip-bg:                  @background-color-info; //** Tooltip background color
+@tooltip-opacity:             .9;
+@tooltip-arrow-width:         5px; //** Tooltip arrow width
+@tooltip-arrow-color:         @tooltip-bg; //** Tooltip arrow color
+@tooltip-zindex:              1070;
+
+
+// Base class
+.tooltip {
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  all: initial;
+
+  position: absolute;
+  z-index: @tooltip-zindex;
+  display: block;
+  font-family: @font-family;
+  font-size: @font-size;
+  opacity: 0;
+
+  &.in     { opacity: @tooltip-opacity; }
+  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
+  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
+  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: @tooltip-max-width;
+  padding: 3px 8px;
+  color: @tooltip-color;
+  text-align: center;
+  background-color: @tooltip-bg;
+  border-radius: @component-border-radius;
+}
+
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.top-left .tooltip-arrow {
+    bottom: 0;
+    right: @tooltip-arrow-width;
+    margin-bottom: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.top-right .tooltip-arrow {
+    bottom: 0;
+    left: @tooltip-arrow-width;
+    margin-bottom: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    top: 0;
+    right: @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    top: 0;
+    left: @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+}
--- a/static/atom-ui/styles/variables/variables.less
+++ b/static/atom-ui/styles/variables/variables.less
@@ -0,0 +1,231 @@
+@import "ui-variables";
+
+//
+// Variables (Forked from Bootstrap 3.3.6)
+// Don't use these variables in packages/themes.
+// Only use the public ui-variables.less + syntax-variables.less
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+@gray-base:              #000;
+@gray-darker:            lighten(@gray-base, 13.5%); // #222
+@gray-dark:              lighten(@gray-base, 20%);   // #333
+@gray:                   lighten(@gray-base, 33.5%); // #555
+@gray-light:             lighten(@gray-base, 46.7%); // #777
+@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
+
+@brand-primary:         @text-color-info;
+@brand-info:            @text-color-info;
+@brand-success:         @text-color-success;
+@brand-warning:         @text-color-warning;
+@brand-danger:          @text-color-error;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+@body-bg:               @app-background-color;
+//** Global textual link color.
+@link-color:            @brand-primary;
+//** Link hover color set via `darken()` function.
+@link-hover-color:      darken(@link-color, 15%);
+//** Link hover decoration.
+@link-hover-decoration: underline;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+
+@font-size-base:          @font-size;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
+
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small:         1.5;
+
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-default-color:              @text-color;
+@btn-default-bg:                 @button-background-color;
+
+@btn-primary-color:              #fff;
+@btn-primary-bg:                 @background-color-info;
+
+@btn-success-color:              #fff;
+@btn-success-bg:                 @background-color-success;
+
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @background-color-info;
+
+@btn-warning-color:              #fff;
+@btn-warning-bg:                 @background-color-warning;
+
+@btn-error-color:               #fff;
+@btn-error-bg:                  @background-color-error;
+
+@btn-link-disabled-color:        @text-color-subtle;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @component-border-radius;
+@btn-border-radius-large:        @component-border-radius * 2;
+@btn-border-radius-small:        @component-border-radius / 2;
+
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes
+
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+
+@screen-xs-max:              (@screen-sm-min - 1);
+
+// //== Form states and alerts
+// //
+// //## Define colors for form feedback states and, by default, alerts.
+//
+@state-success-text:             #3c763d;
+@state-success-bg:               #dff0d8;
+@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text:                #31708f;
+@state-info-bg:                  #d9edf7;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+// == List group
+//
+// ##
+
+//** Background color on `.list-group-item`
+@list-group-bg:                 #fff;
+//** `.list-group-item` border color
+@list-group-border:             #ddd;
+//** List group border radius
+@list-group-border-radius:      @border-radius-base;
+
+//** Background color of single list items on hover
+@list-group-hover-bg:           #f5f5f5;
+//** Text color of active list items
+@list-group-active-color:       @component-active-color;
+//** Background color of active list items
+@list-group-active-bg:          @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border:      @list-group-active-bg;
+//** Text color for content within active list items
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+@list-group-disabled-color:      @gray-light;
+//** Background color of disabled list items
+@list-group-disabled-bg:         @gray-lighter;
+//** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+
+@list-group-link-color:         #555;
+@list-group-link-hover-color:   @list-group-link-color;
+@list-group-link-heading-color: #333;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+@thumbnail-padding:           4px;
+//** Thumbnail background color
+@thumbnail-bg:                @body-bg;
+//** Thumbnail border color
+@thumbnail-border:            #ddd;
+//** Thumbnail border radius
+@thumbnail-border-radius:     @border-radius-base;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
+//** Text muted color
+@text-muted:                  @gray-light;
+//** Abbreviations and acronyms border color
+@abbr-border-color:           @gray-light;
+//** Headings small color
+@headings-small-color:        @gray-light;
+//** Blockquote small color
+@blockquote-small-color:      @gray-light;
+//** Blockquote font size
+@blockquote-font-size:        (@font-size-base * 1.25);
+//** Blockquote border color
+@blockquote-border-color:     @gray-lighter;
+//** Page header border color
+@page-header-border-color:    @gray-lighter;
+//** Horizontal line color.
+@hr-border:                   @gray-lighter;
+
+
+//== Misc
+//
+//##
+
+//** Disabled cursor for form controls and buttons.
+@cursor-disabled: not-allowed;
--- a/static/atom.less
+++ b/static/atom.less
@@ -6,24 +6,15 @@
@import "./variables/ui-variables";
@import "ui-variables";

-// Octicons
-@import "octicon-utf-codes";
-@import "octicon-mixins";
-@import "octicons";
+// Icons
+@import "icons/octicons";

 // Normalize + scaffolding
@import "normalize";
@import "scaffolding";

-// Core components
-@import "cursors";
-@import "panels";
-@import "docks";
-@import "panes";
-@import "syntax";
-@import "text-editor";
-@import "title-bar";
-@import "workspace-view";
+// Core UI styles
+@import "core-ui/_index";

-// Atom UI library
-@import "../node_modules/atom-ui/atom-ui.less";
+// Atom UI library/components
+@import "atom-ui/_index";
--- a/static/core-ui/_index.less
+++ b/static/core-ui/_index.less
@@ -0,0 +1,11 @@
+// Atom Core UI
+// These styles are part of Atom Core
+
+@import "cursors";
+@import "panels";
+@import "docks";
+@import "panes";
+@import "syntax";
+@import "text-editor";
+@import "title-bar";
+@import "workspace-view";
--- a/static/core-ui/cursors.less
+++ b/static/core-ui/cursors.less
--- a/static/core-ui/docks.less
+++ b/static/core-ui/docks.less
--- a/static/core-ui/panels.less
+++ b/static/core-ui/panels.less
--- a/static/core-ui/panes.less
+++ b/static/core-ui/panes.less
--- a/static/core-ui/syntax.less
+++ b/static/core-ui/syntax.less
--- a/static/core-ui/text-editor.less
+++ b/static/core-ui/text-editor.less
--- a/static/core-ui/title-bar.less
+++ b/static/core-ui/title-bar.less
--- a/static/core-ui/workspace-view.less
+++ b/static/core-ui/workspace-view.less
--- a/static/icons/atomicons.woff
+++ b/static/icons/atomicons.woff
--- a/static/icons/octicons-2.1.2.woff
+++ b/static/icons/octicons-2.1.2.woff
--- a/static/icons/octicons.less
+++ b/static/icons/octicons.less
@@ -1,5 +1,17 @@
-@import "octicon-mixins.less";
-@import "octicon-utf-codes.less";
+@import "octicon-mixins";
+
+//
+// Add icon font
+// --------------------------------------------------
+
+@font-face { .octicon-font-legacy(); } // keep for backwards compatibility
+@font-face { .octicon-font(); }
+@font-face { .atomicon-font(); } // Private
+
+
+//
+// Create icons
+// --------------------------------------------------

 .make-icon(@name) {
  .icon-@{name} { .octicon(@name); }
--- a/static/icons/octicons.woff
+++ b/static/icons/octicons.woff
--- a/static/scaffolding.less
+++ b/static/scaffolding.less
@@ -1,13 +1,4 @@
@import "ui-variables";
-@import "octicon-mixins";
-
-//
-// Icon fonts
-// --------------------------------------------------
-
-@font-face { .octicon-font-legacy(); } // keep for backwards compatibility
-@font-face { .octicon-font(); }
-@font-face { .atomicon-font(); } // Private


 //
--- a/static/variables/octicon-mixins.less
+++ b/static/variables/octicon-mixins.less
@@ -35,21 +35,21 @@
 // keep for backwards compatibility
 .octicon-font-legacy() {
  font-family: 'Octicons Regular';
-  src: url("octicons-2.1.2.woff") format("woff");
+  src: url("icons/octicons-2.1.2.woff") format("woff");
  font-weight: normal;
  font-style: normal;
 }

 .octicon-font() {
  font-family: 'Octicons Regular';
-  src: url("octicons.woff") format("woff");
+  src: url("icons/octicons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
 }

 .atomicon-font() {
  font-family: 'Octicons Regular';
-  src: url('atomicons.woff') format('woff');
+  src: url('icons/atomicons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
 }
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -9,6 +9,10 @@ module.exports = {
    "selector-type-no-unknown": null,
    "function-comma-space-after": null, // TODO: enable?
    "font-family-no-missing-generic-family-keyword": null, // needed for octicons (no sensible fallback)
+    "block-opening-brace-space-before": null,
+    "block-closing-brace-empty-line-before": null,
+    "declaration-colon-space-after": null,
+    "declaration-block-single-line-max-declarations": null,
    "declaration-empty-line-before": null, // TODO: enable?
    "declaration-block-trailing-semicolon": null, // TODO: enable
    "no-descending-specificity": null,