Merge pull request #18092 from atom/migrate-atom-dark-ui

➡️ Migrate core package 'atom-dark-ui' into ./packages
2026-02-15 00:55:14 -05:00 · 2018-09-24 14:05:11 -07:00
parent 64fc36f664 871aba8bb0
commit 47b0675dbe
27 changed files with 1024 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -303,8 +303,7 @@
      "integrity": "sha512-b5rCHzPR64JCc5WrLFsz1UawYKUB5v6QswTe/MYHs7tkmJJNzaFbQi2JmbroK58b+3ccwbYrRH8DxWyzGRS2kg=="
    },
    "atom-dark-ui": {
-      "version": "https://www.atom.io/api/packages/atom-dark-ui/versions/0.53.3/tarball",
-      "integrity": "sha512-iCCFdXWaAsNmNFEDdrO+onBMg5PKpVL8YDyjhHLPpCuIsm0jjpbg3qjrBCkhaDHJfiiNIrY2HhqhQKvYcFmYPA=="
+      "version": "file:packages/atom-dark-ui"
    },
    "atom-grammar-test": {
      "version": "0.6.4",
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
    "archive-view": "https://www.atom.io/api/packages/archive-view/versions/0.65.1/tarball",
    "async": "0.2.6",
    "atom-dark-syntax": "https://www.atom.io/api/packages/atom-dark-syntax/versions/0.29.1/tarball",
-    "atom-dark-ui": "https://www.atom.io/api/packages/atom-dark-ui/versions/0.53.3/tarball",
+    "atom-dark-ui": "file:packages/atom-dark-ui",
    "atom-keymap": "8.2.11",
    "atom-light-syntax": "https://www.atom.io/api/packages/atom-light-syntax/versions/0.29.1/tarball",
    "atom-light-ui": "https://www.atom.io/api/packages/atom-light-ui/versions/0.46.3/tarball",
@@ -171,7 +171,7 @@
  },
  "packageDependencies": {
    "atom-dark-syntax": "0.29.1",
-    "atom-dark-ui": "0.53.3",
+    "atom-dark-ui": "file:./packages/atom-dark-ui",
    "atom-light-syntax": "0.29.1",
    "atom-light-ui": "0.46.3",
    "base16-tomorrow-dark-theme": "1.6.0",
--- a/packages/README.md
+++ b/packages/README.md
@@ -10,7 +10,7 @@ See [RFC 003](https://github.com/atom/atom/blob/master/docs/rfcs/003-consolidate
 |---------|------------------|-----------------|
 | **about** | [`./packages/about`](./about) | [#17832](https://github.com/atom/atom/issues/17832) |
 | **atom-dark-syntax** | [`atom/atom-dark-syntax`][atom-dark-syntax] | [#17849](https://github.com/atom/atom/issues/17849) |
-| **atom-dark-ui** | [`atom/atom-dark-ui`][atom-dark-ui] | [#17850](https://github.com/atom/atom/issues/17850) |
+| **atom-dark-ui** | [`./packages/atom-dark-ui`][./atom-dark-ui] | [#17850](https://github.com/atom/atom/issues/17850) |
 | **atom-light-syntax** | [`atom/atom-light-syntax`][atom-light-syntax] | [#17851](https://github.com/atom/atom/issues/17851) |
 | **atom-light-ui** | [`atom/atom-light-ui`][atom-light-ui] | [#17852](https://github.com/atom/atom/issues/17852) |
 | **autocomplete-atom-api** | [`atom/autocomplete-atom-api`][autocomplete-atom-api] |  |
--- a/packages/atom-dark-ui/LICENSE.md
+++ b/packages/atom-dark-ui/LICENSE.md
@@ -0,0 +1,20 @@
+Copyright (c) 2014 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/packages/atom-dark-ui/README.md
+++ b/packages/atom-dark-ui/README.md
@@ -0,0 +1,9 @@
+# Atom Dark UI theme
+
+A dark UI theme for Atom.
+
+This theme is installed by default with Atom and can be activated by going to
+the _Themes_ section in the Settings view (`cmd-,`) and selecting it from the
+_UI Themes_ drop-down menu.
+
+![](https://f.cloud.github.com/assets/671378/2265086/c6897dba-9e7b-11e3-945d-551cac610717.png)
--- a/packages/atom-dark-ui/index.less
+++ b/packages/atom-dark-ui/index.less
@@ -0,0 +1,24 @@
+
+// Atom Dark UI theme
+
+
+@import "styles/ui-variables.less";
+@import "styles/ui-mixins.less";
+
+@import "styles/atom.less";
+@import "styles/buttons.less";
+@import "styles/editor.less";
+@import "styles/git.less";
+@import "styles/lists.less";
+@import "styles/messages.less";
+@import "styles/nav.less";
+@import "styles/overlays.less";
+@import "styles/panels.less";
+@import "styles/panes.less";
+@import "styles/progress.less";
+@import "styles/sites.less";
+@import "styles/tabs.less";
+@import "styles/text.less";
+@import "styles/tooltips.less";
+@import "styles/tree-view.less";
+@import "styles/utilities.less";
--- a/packages/atom-dark-ui/package.json
+++ b/packages/atom-dark-ui/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "atom-dark-ui",
+  "theme": "ui",
+  "version": "0.53.3",
+  "description": "A dark UI theme for Atom",
+  "license": "MIT",
+  "repository": "https://github.com/atom/atom",
+  "engines": {
+    "atom": ">0.40.0"
+  }
+}
--- a/packages/atom-dark-ui/styles/atom.less
+++ b/packages/atom-dark-ui/styles/atom.less
@@ -0,0 +1,25 @@
+* {
+	box-sizing: border-box;
+}
+
+atom-workspace {
+  background-color: @app-background-color;
+}
+
+.scrollbars-visible-always {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: @scrollbar-background-color;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: @scrollbar-color;
+    border-radius: 5px;
+    box-shadow: 0 0 1px black inset;
+  }
+}
--- a/packages/atom-dark-ui/styles/buttons.less
+++ b/packages/atom-dark-ui/styles/buttons.less
@@ -0,0 +1,53 @@
+.btn-background (@color, @hover-color, @selected-color, @text-color) {
+  color: @text-color;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
+
+  &:focus {
+    color: @text-color;
+  }
+  &:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
+  }
+  &.selected,
+  &.selected:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
+    &:hover {
+      background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
+    }
+  }
+}
+
+.btn-variant (@color) {
+  @bg: darken(@color, 10%);
+  @hover: @color;
+  @selected: @color;
+  .btn-background(@bg, @hover, @selected, @text-color-highlight);
+}
+
+.btn {
+  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
+}
+
+.btn.btn-primary {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-info {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-success {
+  .btn-variant(@background-color-success);
+}
+.btn.btn-warning {
+  .btn-variant(@background-color-warning);
+}
+.btn.btn-error {
+  .btn-variant(@background-color-error);
+}
+
+.caret {
+  border-top: 5px solid #fff;
+  margin-top: -1px;
+}
--- a/packages/atom-dark-ui/styles/dropdowns.less
+++ b/packages/atom-dark-ui/styles/dropdowns.less
@@ -0,0 +1,15 @@
+.dropdown-menu {
+  background-color: @overlay-background-color;
+  border-radius: @component-border-radius;
+  border: 1px solid @base-border-color;
+  padding: 0;
+
+  > li > a {
+    .text(normal);
+  }
+
+  > li > a:hover {
+    .text(highlight);
+    background-color: @background-color-highlight;
+  }
+}
--- a/packages/atom-dark-ui/styles/editor.less
+++ b/packages/atom-dark-ui/styles/editor.less
@@ -0,0 +1,23 @@
+atom-text-editor[mini] {
+  color: @text-color-highlight;
+  background-color: @input-background-color;
+  border: 1px solid @input-border-color;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  border-radius: @component-border-radius;
+  padding-left: @component-padding/2;
+
+  .cursor { border-color: #fff; }
+  .selection .region { background-color: lighten(@input-background-color, 10%); }
+}
+
+atom-text-editor[mini].is-focused {
+  background-color: lighten(@input-background-color, 5%);
+  .selection .region { background-color: desaturate(@background-color-info, 50%); }
+}
+
+// FIXME: these should go in syntax themes?
+atom-text-editor {
+  .gutter.drop-shadow {
+    -webkit-box-shadow: -2px 0 10px 2px #222;
+  }
+}
--- a/packages/atom-dark-ui/styles/git.less
+++ b/packages/atom-dark-ui/styles/git.less
@@ -0,0 +1,6 @@
+.status { .text(normal); }
+.status-added { .text(success); }
+.status-ignored { .text(subtle); }
+.status-modified { .text(warning); }
+.status-removed { .text(error); }
+.status-renamed { .text(info); }
--- a/packages/atom-dark-ui/styles/lists.less
+++ b/packages/atom-dark-ui/styles/lists.less
@@ -0,0 +1,128 @@
+@import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less
+
+.list-group, .list-tree {
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
+    .text(normal);
+  }
+
+  .generate-list-item-text-color(@class) {
+    li:not(.list-nested-item).text-@{class},
+    li.list-nested-item.text-@{class} > .list-item {
+      .text(@class);
+    }
+  }
+  .generate-list-item-text-color(subtle);
+  .generate-list-item-text-color(info);
+  .generate-list-item-text-color(success);
+  .generate-list-item-text-color(warning);
+  .generate-list-item-text-color(error);
+  .generate-list-item-text-color(selected);
+
+  .generate-list-item-status-color(@color, @status) {
+    li:not(.list-nested-item).status-@{status},
+    li.list-nested-item.status-@{status} > .list-item {
+      color: @color;
+    }
+
+    li:not(.list-nested-item).selected.status-@{status},
+    li.list-nested-item.selected.status-@{status} > .list-item {
+      color: @color;
+    }
+  }
+
+  .generate-list-item-status-color(@text-color-subtle, ignored);
+  .generate-list-item-status-color(@text-color-added, added);
+  .generate-list-item-status-color(@text-color-renamed, renamed);
+  .generate-list-item-status-color(@text-color-modified, modified);
+  .generate-list-item-status-color(@text-color-removed, removed);
+
+  li:not(.list-nested-item).selected,
+  li.list-nested-item.selected > .list-item {
+    .text(selected);
+  }
+}
+
+.select-list ol.list-group,
+&.select-list ol.list-group {
+  li.two-lines {
+    .secondary-line { color: @text-color-subtle; }
+    &.selected .secondary-line {
+      color: @text-color;
+      text-shadow: none;
+    }
+  }
+
+  // We want to highlight the background of the list items because we dont
+  // know their size.
+  li.selected {
+    background-color: @background-color-selected;
+    &:before{ display: none; }
+  }
+
+  &.mark-active{
+    @active-icon-size: 14px;
+
+    // pad in front of the text where the icon would be We'll pad the non-
+    // active items with a 'fake' icon so other classes can pad the item
+    // without worrying about the icon padding.
+    li:before {
+      content: '';
+      background-color: transparent;
+      position: static;
+      display: inline-block;
+      left: auto; right: auto;
+      height: @active-icon-size;
+      width: @active-icon-size;
+    }
+    > li:not(.active):before {
+      margin-right: @component-icon-padding;
+    }
+    li.active {
+      .octicon(check, @active-icon-size);
+      &:before {
+        margin-right: @component-icon-padding;
+        color: @text-color-success;
+      }
+    }
+  }
+}
+
+.select-list.popover-list {
+  background-color: @overlay-background-color;
+  box-shadow: 0 0 10px @base-border-color;
+  padding: @component-padding/2;
+  border-radius: @component-border-radius;
+  border: 1px solid @overlay-border-color;
+
+  atom-text-editor {
+    margin-bottom: @component-padding/2;
+  }
+
+  .list-group li {
+    padding-left: @component-padding/2;
+  }
+}
+
+.ui-sortable {
+  li {
+    line-height: 2.5;
+  }
+
+  // For sortable lists in the settings view
+  li.ui-sortable-placeholder {
+    visibility: visible !important;
+    background-color: darken(@pane-item-background-color, 10%);
+  }
+}
+
+li.ui-draggable-dragging, li.ui-sortable-helper {
+  line-height: @component-line-height;
+  height: @component-line-height;
+  border: 0;
+  border-radius: 0;
+  list-style: none;
+  padding: 0 @component-padding;
+  background: @background-color-highlight;
+  box-shadow: 0 0 1px @base-border-color;
+}
--- a/packages/atom-dark-ui/styles/messages.less
+++ b/packages/atom-dark-ui/styles/messages.less
@@ -0,0 +1,4 @@
+ul.background-message {
+  font-weight: bold;
+  color: rgba(0, 0, 0, .2);
+}
--- a/packages/atom-dark-ui/styles/nav.less
+++ b/packages/atom-dark-ui/styles/nav.less
@@ -0,0 +1,25 @@
+.nav-tabs {
+  border-bottom: 1px solid @base-border-color;
+  li {
+    a,
+    &.active a {
+      border: none;
+      margin-right: 0px;
+      margin-bottom: 1px;
+    }
+
+    a:hover,
+    &.active a,
+    &.active a:hover {
+      background-color: @background-color-highlight;
+      border: none;
+      color: @text-color-selected;
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    &.active a {
+      background-color: @tab-background-color-active;
+    }
+  }
+}
--- a/packages/atom-dark-ui/styles/overlays.less
+++ b/packages/atom-dark-ui/styles/overlays.less
@@ -0,0 +1,39 @@
+atom-panel.modal, .overlay {
+  color: @text-color;
+  background-color: @overlay-background-color;
+  padding: @component-padding;
+  border: 1px solid @overlay-border-color;
+  box-shadow: 0 0 10px @base-border-color;
+  border-radius: @component-border-radius;
+
+  atom-text-editor[mini] {
+    margin-bottom: @component-padding;
+  }
+
+  .select-list ol.list-group,
+  &.select-list ol.list-group {
+
+    background-color: lighten(@overlay-background-color, 3%);
+
+    li {
+      padding: @component-padding;
+      border-bottom: 1px solid @overlay-background-color;
+
+      &.two-lines { padding: @component-padding/2 @component-padding; }
+
+      .status.icon {
+        float: right;
+        margin-left: @component-icon-padding;
+        &:before {
+          margin-right: 0;
+        }
+      }
+
+      &.selected {
+        .status.icon {
+          color: @text-color-selected;
+        }
+      }
+    }
+  }
+}
--- a/packages/atom-dark-ui/styles/panels.less
+++ b/packages/atom-dark-ui/styles/panels.less
@@ -0,0 +1,61 @@
+@import "buttons.less";
+
+.panel {
+  &.bordered {
+    border: 1px solid @base-border-color;
+    border-radius: @component-border-radius;
+  }
+}
+
+atom-panel, .tool-panel {
+  .text(normal);
+  position: relative;
+
+  background-color: @tool-panel-background-color;
+
+  &.bottom, &.panel-bottom,
+  &.footer, &.panel-footer {
+    border-top: 1px solid @tool-panel-border-color;
+    box-shadow: inset 0 1px 0 @background-color-highlight;
+  }
+
+  &.left, &.panel-left {
+    border-right: 1px solid @tool-panel-border-color;
+  }
+
+  &.right, &.panel-right {
+    border-left: 1px solid @tool-panel-border-color;
+  }
+}
+
+.inset-panel {
+  position: relative;
+  background-color: @inset-panel-background-color;
+}
+
+.is-blurred {
+  atom-panel,
+  .inset-panel {
+  }
+}
+
+.panel-heading {
+  .text(normal);
+
+  border-bottom: 1px solid @panel-heading-border-color;
+  border-top: 1px solid fadein(@background-color-highlight, 10%);
+
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
+
+  .btn {
+    padding-left: 8px;
+    padding-right: 8px;
+
+    @bg: lighten(@button-background-color, 10%);
+    @hover: lighten(@button-background-color-hover, 10%);
+    @selected: lighten(@button-background-color-selected, 10%);
+    @text: lighten(@text-color, 10%);
+    .btn-background(@bg, @hover, @selected, @text);
+  }
+}
--- a/packages/atom-dark-ui/styles/panes.less
+++ b/packages/atom-dark-ui/styles/panes.less
@@ -0,0 +1,25 @@
+.pane-item {
+  .panel {
+    border-color: fadeout(@inset-panel-border-color, 30%);
+  }
+}
+
+atom-pane-container {
+  atom-pane {
+    background-color: lighten(@app-background-color, 4%);
+
+    &:focus {
+      background-color: @app-background-color;
+    }
+  }
+
+  atom-pane-axis.horizontal > * {
+    border-right: 1px solid @pane-item-border-color;
+    &:last-child { border-right: none; }
+  }
+
+  atom-pane-axis.vertical > * {
+    border-bottom: 1px solid @pane-item-border-color;
+    &:last-child { border-bottom: none; }
+  }
+}
--- a/packages/atom-dark-ui/styles/progress.less
+++ b/packages/atom-dark-ui/styles/progress.less
@@ -0,0 +1,69 @@
+.loading-spinner(@size) {
+  width: @size;
+  height: @size;
+  display: block;
+
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &.inline-block {
+    display: inline-block;
+  }
+}
+
+.loading-spinner-large {
+  .loading-spinner(64px);
+}
+
+.loading-spinner-medium {
+  .loading-spinner(50px);
+}
+
+.loading-spinner-small {
+  .loading-spinner(32px);
+}
+
+.loading-spinner-tiny {
+  .loading-spinner(20px);
+}
+
+// Much learning from:
+// http://css-tricks.com/html5-progress-element/
+
+@progress-height: 16px;
+@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));
+
+progress {
+  height: @progress-height;
+  -webkit-appearance: none;
+  border-radius: @component-border-radius;
+  background-color: #666;
+  background-image:
+     -webkit-linear-gradient(-30deg,
+                             transparent 33%, rgba(0, 0, 0, .1) 33%,
+                             rgba(0,0, 0, .1) 66%, transparent 66%),
+                             @progress-shine-gradient;
+  border-radius: 2px;
+  background-size: 25px @progress-height, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+  border-radius: @component-border-radius;
+  background-image: @progress-shine-gradient;
+  background-color: @background-color-success;
+}
+
+progress[value] {
+  background-image: @progress-shine-gradient;
+  -webkit-animation: none;
+}
+
+@-webkit-keyframes animate-stripes {
+   100% { background-position: 100px 0px; }
+}
--- a/packages/atom-dark-ui/styles/sites.less
+++ b/packages/atom-dark-ui/styles/sites.less
@@ -0,0 +1,11 @@
+.ui-site(@num, @color) {
+  .ui-site-@{num} {
+    background-color: @color;
+  }
+}
+
+.ui-site(1, @ui-site-color-1);
+.ui-site(2, @ui-site-color-2);
+.ui-site(3, @ui-site-color-3);
+.ui-site(4, @ui-site-color-4);
+.ui-site(5, @ui-site-color-5);
--- a/packages/atom-dark-ui/styles/tabs.less
+++ b/packages/atom-dark-ui/styles/tabs.less
@@ -0,0 +1,157 @@
+@tab-radius: 3px;
+@modified-icon-width: 8px;
+@tab-skew: 30deg;
+@tab-top-padding: 5px;
+@tab-bottom-border-height: 5px;
+@tab-border: 1px solid @tab-border-color;
+@tab-bar-bottom-border-color: #111;
+@tab-max-width: 160px;
+
+.tab-bar {
+  height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+  background: @tab-bar-background-color;
+  box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15);
+  padding: 0 10px 0 25px;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab {
+    position: relative;
+    top: @tab-top-padding;
+    max-width: @tab-max-width;
+    height: @tab-height;
+    line-height: @tab-height;
+    padding: 0;
+    margin: 0 20px 0 5px;
+    color: @text-color;
+
+    transition: color .1s ease-in;
+    border: none;
+
+    &, &:before, &:after {
+      background-image: -webkit-linear-gradient(top, lighten(#333, 7%), #333);
+      height: @tab-height;
+    }
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      width: 25px;
+      height: @tab-height;
+    }
+
+    // left angled edge
+    &:before {
+      left: -14px;
+      border-top-left-radius: @tab-radius;
+      box-shadow: inset 1px 1px 0 @tab-border-color, -4px 0px 4px rgba(0,0,0,.1);
+      -webkit-transform: skewX(-@tab-skew);
+    }
+
+    // right angled edge
+    &:after {
+      right: -14px;
+      border-top-right-radius: @tab-radius;
+      box-shadow: inset -1px 1px 0 @tab-border-color, 4px 0px 4px rgba(0,0,0,.1);
+      -webkit-transform: skewX(@tab-skew);
+    }
+
+    .close-icon {
+      right: 0;
+      z-index: 3;
+      text-align: right;
+      line-height: @tab-height;
+      color: @text-color;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+
+    &.modified:not(:hover) .close-icon {
+      right: 0;
+      top: @tab-height/2 - @modified-icon-width/2 + 1px;
+      width: @modified-icon-width;
+      height: @modified-icon-width;
+    }
+
+    &.modified:hover .close-icon:hover {
+      color: @text-color-highlight;
+    }
+
+    .title {
+      position: relative;
+      z-index: 1;
+      margin-top: -@tab-top-padding;
+      padding-top: @tab-top-padding;
+      padding-right: 10px;
+    }
+  }
+
+  .tab.active {
+    z-index: 1;
+    color: @text-color-highlight;
+    box-shadow: inset -1px 1px 0 @tab-border-color, 4px -4px 4px rgba(0,0,0,.1);
+
+    .close-icon {
+      line-height: @tab-height - 1px;
+      color: @text-color;
+    }
+
+    &, &:before, &:after {
+      background-image: -webkit-linear-gradient(top, lighten(@tab-background-color-active, 7%), @tab-background-color-active);
+      height: @tab-height + 1px;
+    }
+
+    &:before {
+      box-shadow: inset 1px 1px 0 @tab-border-color, -4px -4px 4px rgba(0,0,0,.1);
+    }
+
+    &:after {
+      box-shadow: inset -1px 1px 0 @tab-border-color, 4px -4px 4px rgba(0,0,0,.1);
+    }
+  }
+
+  .tab:hover {
+    color: @text-color-highlight;
+  }
+
+  .tab.active:hover .close-icon {
+    color: @text-color;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .placeholder {
+    height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+    pointer-events: none;
+    &:before {
+      margin-left: -9px; // center between tabs
+    }
+    &:after {
+      top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px;
+      margin-left: -10px; // center between tabs
+    }
+  }
+}
+
+// border
+.tab-bar + .item-views::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  height: @tab-bottom-border-height;
+  left: 0;
+  right: 0;
+  background-color: @tab-background-color-active;
+  border-top: 1px solid @tab-border-color;
+  border-bottom: 1px solid @tab-bar-bottom-border-color;
+  pointer-events: none;
+}
--- a/packages/atom-dark-ui/styles/text.less
+++ b/packages/atom-dark-ui/styles/text.less
@@ -0,0 +1,86 @@
+h1,
+h2,
+h3 {
+  line-height: 1em;
+  margin-bottom: 15px
+}
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+
+p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: normal;
+}
+
+pre {
+  box-shadow: none;
+  color: @text-color;
+  background: @inset-panel-background-color;
+  border-radius: @component-border-radius;
+  border: none;
+  margin: 0;
+}
+
+code {
+  .text(highlight);
+  background: @background-color-highlight;
+  border-radius: @component-border-radius;
+}
+
+.markdown-preview code {
+  text-shadow: none;
+}
+
+.selected { .text(highlight); }
+
+.text-smaller { font-size: 0.9em; }
+
+.text-subtle { .text(subtle); }
+.text-highlight { .text(highlight); }
+
+.text-error { .text(error); }
+.text-info {
+  .text(info);
+  &:hover { color: @text-color-info; }
+}
+.text-warning {
+  .text(warning);
+  &:hover { color: @text-color-warning; }
+}
+.text-success {
+  .text(success);
+  &:hover { color: @text-color-success; }
+}
+
+.highlight {
+  color: @text-color-highlight;
+  font-weight: bold;
+  text-shadow: none;
+  background-color: @background-color-highlight;
+  border-radius: @component-border-radius;
+  padding: 1px 3px;
+}
+
+.highlight-color(@name, @color, @text-color) {
+  .highlight-@{name} {
+    color: lighten(saturate(@text-color, 0%), 30%);
+    font-weight: bold;
+    text-shadow: none;
+    background-color: fadeout(@color, 60%);
+    border-radius: @component-border-radius;
+    padding: 1px 3px;
+  }
+}
+.highlight-color(info, @background-color-info, @text-color-info);
+.highlight-color(warning, @background-color-warning, @text-color-warning);
+.highlight-color(error, @background-color-error, @text-color-error);
+.highlight-color(success, @background-color-success, @text-color-success);
+
+.results-view .path-details.list-item {
+  color: darken(@text-color-highlight, 18%);
+}
--- a/packages/atom-dark-ui/styles/tooltips.less
+++ b/packages/atom-dark-ui/styles/tooltips.less
@@ -0,0 +1,48 @@
+.tooltip {
+  @tip-background-color: #fff;
+  @tip-text-color: #333;
+  white-space: nowrap;
+
+  .keystroke {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    color: #777;
+    padding-left: 2px;
+  }
+
+  &.in { opacity: 1; }
+
+  .tooltip-inner {
+    line-height: 19px;
+    border-radius: @component-border-radius;
+    background-color: @tip-background-color;
+    color: @tip-text-color;
+    white-space: nowrap;
+    max-width: none;
+  }
+
+  &.top .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-left .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-right .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.right .tooltip-arrow {
+    border-right-color: @tip-background-color;
+  }
+  &.left .tooltip-arrow {
+    border-left-color: @tip-background-color;
+  }
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+}
--- a/packages/atom-dark-ui/styles/tree-view.less
+++ b/packages/atom-dark-ui/styles/tree-view.less
@@ -0,0 +1,35 @@
+.tree-view {
+  font-size: @font-size;
+  background: @tree-view-background-color;
+
+  .selected:before {
+    background: #444;
+    box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
+  }
+}
+
+.tree-view-resizer {
+  .tree-view-resize-handle {
+    width: 8px;
+  }
+}
+
+.focusable-panel {
+  opacity: 1;
+  box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
+
+  &:focus {
+    background: #282828;
+
+    .selected:before {
+      background: @background-color-selected;
+    }
+  }
+}
+
+[data-show-on-right-side=true] {
+  .tree-view .selected:before,
+  .focusable-panel {
+    box-shadow: inset 3px 0 0 rgba(0,0,0, .05);
+  }
+}
--- a/packages/atom-dark-ui/styles/ui-mixins.less
+++ b/packages/atom-dark-ui/styles/ui-mixins.less
@@ -0,0 +1,37 @@
+// Pattern matching; ish is cray.
+// http://lesscss.org/#-pattern-matching-and-guard-expressions
+.text(normal) {
+  font-weight: normal;
+  color: @text-color;
+  text-shadow: none;
+}
+.text(subtle) {
+  font-weight: normal;
+  color: @text-color-subtle;
+  text-shadow: none;
+}
+.text(highlight) {
+  font-weight: normal;
+  color: @text-color-highlight;
+  text-shadow: 0 1px 0 rgba(0,0,0, .5);
+}
+.text(selected) {
+  .text(highlight)
+}
+
+.text(info) {
+  color: @text-color-info;
+  text-shadow: none;
+}
+.text(success) {
+  color: @text-color-success;
+  text-shadow: none;
+}
+.text(warning) {
+  color: @text-color-warning;
+  text-shadow: none;
+}
+.text(error) {
+  color: @text-color-error;
+  text-shadow: none;
+}
--- a/packages/atom-dark-ui/styles/ui-variables.less
+++ b/packages/atom-dark-ui/styles/ui-variables.less
@@ -0,0 +1,91 @@
+// Colors
+
+@text-color: #aaa;
+@text-color-subtle: #555;
+@text-color-highlight: #fff;
+@text-color-selected: @text-color-highlight;
+
+@text-color-info: #5293d8;
+@text-color-success: #2BDA77;
+@text-color-warning: #ff982d;
+@text-color-error: #c00;
+
+@text-color-ignored: @text-color-subtle;
+@text-color-added: @text-color-success;
+@text-color-renamed: @text-color-info;
+@text-color-modified: @text-color-warning;
+@text-color-removed: @text-color-error;
+
+@background-color-info: #0098ff;
+@background-color-success: #17ca65;
+@background-color-warning: #ffaa2c;
+@background-color-error: #c00;
+@background-color-highlight: rgba(255, 255, 255, 0.07);
+@background-color-selected: #4182C4;
+
+@app-background-color: #333;
+
+@base-background-color: lighten(@tool-panel-background-color, 5%);
+@base-border-color: rgba(0, 0, 0, 0.5);
+
+@pane-item-background-color: @base-background-color;
+@pane-item-border-color: rgba(0, 0, 0, 0.5);
+
+@input-background-color: #212224;
+@input-border-color: @base-border-color;
+
+@tool-panel-background-color: #1d1f21;
+@tool-panel-border-color: @base-border-color;
+
+@inset-panel-background-color: #161719;
+@inset-panel-border-color: @base-border-color;
+
+@panel-heading-background-color: #43484d;
+@panel-heading-border-color: fadein(@base-border-color, 10%);
+
+@overlay-background-color: #202123;
+@overlay-border-color: @background-color-highlight;
+
+@button-background-color: #43484d;
+@button-background-color-hover: lighten(@button-background-color, 5%);
+@button-background-color-selected: #5c6064;
+@button-border-color: @base-border-color;
+
+@tab-bar-background-color: #222;
+@tab-bar-border-color: darken(@tab-background-color-active, 10%);
+@tab-background-color: #333;
+@tab-background-color-active: #222;
+@tab-border-color: #484848;
+
+@tree-view-background-color: #303030;
+@tree-view-border-color: @tool-panel-border-color;
+
+@scrollbar-background-color: #222425; // Needs to be opaque -> atom/atom/issues/4578
+@scrollbar-color: rgba(92, 92, 92, 0.5);
+
+@ui-site-color-1: @background-color-success; // green
+@ui-site-color-2: @background-color-info; // blue
+@ui-site-color-3: @background-color-warning; // orange
+@ui-site-color-4: #db2ff4; // purple
+@ui-site-color-5: #f5e11d; // yellow
+
+
+// Sizes
+
+@font-size: 11px;
+@input-font-size: 14px;
+
+@disclosure-arrow-size: 12px;
+
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+@component-border-radius: 2px;
+
+@tab-height: 26px;
+
+
+// Other
+
+@font-family: system-ui;
--- a/packages/atom-dark-ui/styles/utilities.less
+++ b/packages/atom-dark-ui/styles/utilities.less
@@ -0,0 +1,18 @@
+.key-binding {
+  background: -webkit-linear-gradient(
+    rgba(100, 100, 100, 0.5),
+    rgba(70,70,70, 0.5));
+  -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
+  display: inline-block;
+  line-height: 100%;
+  border-radius: @component-border-radius;
+  margin-left: @component-icon-padding;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: @font-size - 1px;
+  padding: @component-padding / 2;
+}
+
+.badge {
+  .text(highlight);
+  background: @background-color-highlight;
+}