Merge pull request #18096 from atom/migrate-atom-light-ui

➡️ Migrate core package 'atom-light-ui' into ./packages
2026-01-26 07:19:06 -05:00 · 2018-09-25 10:45:12 -07:00
parent 363af81b04 eafb7ba513
commit 5e64cdcf17
25 changed files with 964 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -343,8 +343,7 @@
      "version": "file:packages/atom-light-syntax"
    },
    "atom-light-ui": {
-      "version": "https://www.atom.io/api/packages/atom-light-ui/versions/0.46.3/tarball",
-      "integrity": "sha512-oCbvW6mQzxmUdqHuz5F6vHlQRGXJqeh432/i/uCQL0LOWTj8wIgel6aEVRgHVijsanQZr7PGlQWcK+BoVv3O/A=="
+      "version": "file:packages/atom-light-ui"
    },
    "atom-pathspec": {
      "version": "0.0.0",
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
    "atom-dark-ui": "file:packages/atom-dark-ui",
    "atom-keymap": "8.2.11",
    "atom-light-syntax": "file:packages/atom-light-syntax",
-    "atom-light-ui": "https://www.atom.io/api/packages/atom-light-ui/versions/0.46.3/tarball",
+    "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",
@@ -173,7 +173,7 @@
    "atom-dark-syntax": "file:./packages/atom-dark-syntax",
    "atom-dark-ui": "file:./packages/atom-dark-ui",
    "atom-light-syntax": "file:./packages/atom-light-syntax",
-    "atom-light-ui": "0.46.3",
+    "atom-light-ui": "file:./packages/atom-light-ui",
    "base16-tomorrow-dark-theme": "1.6.0",
    "base16-tomorrow-light-theme": "1.6.0",
    "one-dark-ui": "file:./packages/one-dark-ui",
--- a/packages/README.md
+++ b/packages/README.md
@@ -12,7 +12,7 @@ See [RFC 003](https://github.com/atom/atom/blob/master/docs/rfcs/003-consolidate
 | **atom-dark-syntax** | [`./packages/atom-dark-syntax`][./atom-dark-syntax] | [#17849](https://github.com/atom/atom/issues/17849) |
 | **atom-dark-ui** | [`./packages/atom-dark-ui`][./atom-dark-ui] | [#17850](https://github.com/atom/atom/issues/17850) |
 | **atom-light-syntax** | [`./packages/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) |
+| **atom-light-ui** | [`./packages/atom-light-ui`][./atom-light-ui] | [#17852](https://github.com/atom/atom/issues/17852) |
 | **autocomplete-atom-api** | [`atom/autocomplete-atom-api`][autocomplete-atom-api] |  |
 | **autocomplete-css** | [`atom/autocomplete-css`][autocomplete-css] |  |
 | **autocomplete-html** | [`atom/autocomplete-html`][autocomplete-html] |  |
--- a/packages/atom-light-ui/LICENSE.md
+++ b/packages/atom-light-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-light-ui/README.md
+++ b/packages/atom-light-ui/README.md
@@ -0,0 +1,9 @@
+# Atom Light UI theme
+
+A light 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/2265022/bb148a20-9e7a-11e3-81c8-bf5965d48183.png)
--- a/packages/atom-light-ui/index.less
+++ b/packages/atom-light-ui/index.less
@@ -0,0 +1,22 @@
+
+// Atom Light UI theme
+
+@import "styles/ui-variables.less";
+@import "styles/ui-mixins.less";
+
+@import "styles/atom.less";
+@import "styles/utilities.less";
+@import "styles/text.less";
+@import "styles/git.less";
+@import "styles/sites.less";
+@import "styles/messages.less";
+@import "styles/progress.less";
+@import "styles/buttons.less";
+@import "styles/panels.less";
+@import "styles/panes.less";
+@import "styles/lists.less";
+@import "styles/overlays.less";
+@import "styles/editor.less";
+@import "styles/tabs.less";
+@import "styles/tooltips.less";
+@import "styles/tree-view.less";
--- a/packages/atom-light-ui/package.json
+++ b/packages/atom-light-ui/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "atom-light-ui",
+  "theme": "ui",
+  "version": "0.46.3",
+  "description": "A light UI theme for Atom",
+  "repository": "https://github.com/atom/atom.git",
+  "license": "MIT",
+  "engines": {
+    "atom": ">0.50.0"
+  }
+}
--- a/packages/atom-light-ui/styles/atom.less
+++ b/packages/atom-light-ui/styles/atom.less
@@ -0,0 +1,21 @@
+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 white inset;
+  }
+}
--- a/packages/atom-light-ui/styles/buttons.less
+++ b/packages/atom-light-ui/styles/buttons.less
@@ -0,0 +1,60 @@
+.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
+  @border-shadow: inset 0 0 0 1px @border-color;
+  @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  color: @text-color;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
+  box-shadow: @border-shadow;
+
+  &:hover {
+    color: @text-color-hover;
+    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
+  }
+  &:active,
+  &.selected:hover:active {
+    box-shadow: @active-shadow, @border-shadow;
+  }
+  &.selected,
+  &.selected:hover {
+    color: @text-color-selected;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
+  }
+  &.selected:hover {
+    box-shadow: @border-shadow;
+    background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
+  }
+}
+
+.btn-variant (@color) {
+  @bg: darken(@color, 10%);
+  @hover: @color;
+  @selected: @color;
+  @border: fadeout(darken(@color, 20%), 50%);
+  .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
+}
+
+.btn {
+  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
+}
+
+.btn.btn-primary {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-info {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-success {
+  .btn-variant(@background-color-success);
+}
+.btn.btn-warning {
+  .btn-variant(@background-color-warning);
+}
+.btn.btn-error {
+  .btn-variant(@background-color-error);
+}
+
+.btn-group > .btn {
+  border: none;
+}
--- a/packages/atom-light-ui/styles/editor.less
+++ b/packages/atom-light-ui/styles/editor.less
@@ -0,0 +1,34 @@
+atom-text-editor[mini] {
+  color: lighten(@text-color, 15%);
+  background-color: darken(@input-background-color, 1%);
+  border: 1px solid lighten(@input-border-color, 10%);
+
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  border-radius: @component-border-radius;
+  padding-left: @component-padding/2;
+
+  .cursor { border-color: #000; }
+  .selection .region { background-color: rgba(0, 0, 0, .2); }
+  .placeholder-text {
+    color: lighten(@text-color-subtle, 10%);
+  }
+}
+
+atom-text-editor[mini].is-focused {
+  color: @text-color;
+  background-color: @input-background-color;
+  border-color: @input-border-color;
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
+  .selection .region {
+    background-color: lighten(@background-color-info, 30%);
+  }
+}
+
+// FIXME: these should go in syntax themes?
+atom-text-editor {
+  .gutter.drop-shadow {
+    -webkit-box-shadow: -2px 0 10px 2px #222;
+  }
+}
--- a/packages/atom-light-ui/styles/git.less
+++ b/packages/atom-light-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-light-ui/styles/lists.less
+++ b/packages/atom-light-ui/styles/lists.less
@@ -0,0 +1,127 @@
+@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: darken(@color, 7%);
+    }
+  }
+  .generate-list-item-status-color(@text-color-subtle, ignored);
+  .generate-list-item-status-color(@text-color-added, added);
+  .generate-list-item-status-color(@text-color-renamed, renamed);
+  .generate-list-item-status-color(@text-color-modified, modified);
+  .generate-list-item-status-color(@text-color-removed, removed);
+
+  li:not(.list-nested-item).selected,
+  li.list-nested-item.selected > .list-item {
+    .text(selected);
+  }
+}
+
+.select-list ol.list-group,
+&.select-list ol.list-group {
+  li.two-lines {
+    .secondary-line { color: @text-color-subtle; }
+    &.selected .secondary-line {
+      color: lighten(@text-color-subtle, 10%);
+      text-shadow: none;
+    }
+  }
+
+  // We want to highlight the background of the list items because we dont
+  // know their size.
+  li.selected {
+    background-color: @background-color-selected;
+    &:before{ display: none; }
+  }
+
+  &.mark-active{
+    @active-icon-size: 14px;
+
+    // pad in front of the text where the icon would be We'll pad the non-
+    // active items with a 'fake' icon so other classes can pad the item
+    // without worrying about the icon padding.
+    li:before {
+      content: '';
+      background-color: transparent;
+      position: static;
+      display: inline-block;
+      left: auto; right: auto;
+      height: @active-icon-size;
+      width: @active-icon-size;
+    }
+    > li:not(.active):before {
+      margin-right: @component-icon-padding;
+    }
+    li.active {
+      .octicon(check, @active-icon-size);
+      &:before {
+        margin-right: @component-icon-padding;
+        color: @text-color-success;
+      }
+    }
+  }
+}
+
+.select-list.popover-list {
+  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-light-ui/styles/messages.less
+++ b/packages/atom-light-ui/styles/messages.less
@@ -0,0 +1,4 @@
+ul.background-message {
+  font-weight: bold;
+  color: rgba(0, 0, 0, .18);
+}
--- a/packages/atom-light-ui/styles/overlays.less
+++ b/packages/atom-light-ui/styles/overlays.less
@@ -0,0 +1,41 @@
+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: @inset-panel-background-color;
+
+    li {
+      padding: @component-padding;
+      border-top: 1px solid @inset-panel-border-color;
+      border-left: 1px solid @inset-panel-border-color;
+      border-right: 1px solid @inset-panel-border-color;
+      &:last-child { border-bottom: 1px solid @inset-panel-border-color; }
+
+      &.two-lines { padding: @component-padding/2 @component-padding; }
+      &.selected {
+        color: @text-color;
+        background-color: @background-color-highlight;
+      }
+
+      .status.icon {
+        float: right;
+        margin-left: @component-icon-padding;
+        &:before {
+          margin-right: 0;
+        }
+      }
+    }
+
+  }
+}
--- a/packages/atom-light-ui/styles/panels.less
+++ b/packages/atom-light-ui/styles/panels.less
@@ -0,0 +1,55 @@
+@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, &.footer-bottom {
+    border-top: 1px solid @tool-panel-border-color;
+  }
+
+  &.left, &.panel-left {
+    border-right: 1px solid @tool-panel-border-color;
+  }
+
+  &.right, &.panel-right {
+    border-left: 1px solid @tool-panel-border-color;
+  }
+
+  .inset-panel {
+    border-radius: @component-border-radius;
+
+    border: 1px solid @tool-panel-border-color;
+  }
+}
+
+.inset-panel {
+  position: relative;
+  background-color: @inset-panel-background-color;
+}
+
+.panel-heading {
+  border-bottom: none;
+  padding: @component-padding - 2px @component-padding;
+
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
+
+  .btn {
+    @bg: lighten(@button-background-color, 10%);
+    @hover: lighten(@button-background-color-hover, 10%);
+    @selected: lighten(@button-background-color-selected, 10%);
+    @text: lighten(@text-color, 10%);
+    .btn-background(@bg, @hover, @selected, @button-border-color, @text, @text);
+  }
+}
--- a/packages/atom-light-ui/styles/panes.less
+++ b/packages/atom-light-ui/styles/panes.less
@@ -0,0 +1,19 @@
+atom-pane-container {
+  atom-pane {
+    background-color: lighten(@app-background-color, 3%);
+
+    &:focus {
+      background-color: @app-background-color;
+    }
+  }
+
+  atom-pane-axis.horizontal > * {
+    border-right: 1px solid @pane-item-border-color;
+    &:last-child { border-right: none; }
+  }
+
+  atom-pane-axis.vertical > * {
+    border-bottom: 1px solid @pane-item-border-color;
+    &:last-child { border-bottom: none; }
+  }
+}
--- a/packages/atom-light-ui/styles/progress.less
+++ b/packages/atom-light-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: #ccc;
+  background-image:
+     -webkit-linear-gradient(-30deg,
+                             transparent 33%, rgba(0, 0, 0, .1) 33%,
+                             rgba(0,0, 0, .1) 66%, transparent 66%),
+                             @progress-shine-gradient;
+  border-radius: 2px;
+  background-size: 25px @progress-height, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+  border-radius: @component-border-radius;
+  background-image: @progress-shine-gradient;
+  background-color: @background-color-info;
+}
+
+progress[value] {
+  background-image: @progress-shine-gradient;
+  -webkit-animation: none;
+}
+
+@-webkit-keyframes animate-stripes {
+   100% { background-position: 100px 0px; }
+}
--- a/packages/atom-light-ui/styles/sites.less
+++ b/packages/atom-light-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-light-ui/styles/tabs.less
+++ b/packages/atom-light-ui/styles/tabs.less
@@ -0,0 +1,151 @@
+@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: @tab-border-color;
+@tab-max-width: 160px;
+
+.tab-bar {
+  height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+  background-image: -webkit-linear-gradient(top, @tab-bar-background-color, lighten(@tab-bar-background-color, 9%));
+  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;
+    color: @text-color;
+    padding: 0;
+    margin: 0 20px 0 5px;
+
+    box-shadow: inset -1px -1px 1px rgba(0,0,0, .05);
+    transition: color .1s ease-in;
+
+    &, &:before, &:after {
+      background-image: -webkit-linear-gradient(top, @tab-background-color, darken(@tab-background-color, 6%));
+      border-top: @tab-border;
+    }
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      top: -1px;
+      width: 25px;
+      height: @tab-height;
+    }
+
+    // left angled edge
+    &:before {
+      left: -14px;
+      border-top-left-radius: @tab-radius;
+      border-left: @tab-border;
+      box-shadow: inset 1px -1px 1px rgba(0,0,0, .05);
+      -webkit-transform: skewX(-@tab-skew);
+    }
+
+    // right angled edge
+    &:after {
+      right: -14px;
+      border-top-right-radius: @tab-radius;
+      border-right: @tab-border;
+      box-shadow: inset -1px -1px 1px rgba(0,0,0, .05);
+      -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 - 1px;
+      padding-top: @tab-top-padding + 1px;
+      padding-right: 10px;
+    }
+  }
+
+  .tab.active {
+    z-index: 1;
+    color: @text-color-highlight;
+
+    .close-icon {
+      line-height: @tab-height - 1px;
+      color: @text-color;
+    }
+
+    &, &:before, &:after {
+      background: @tab-background-color-active;
+      height: @tab-height + 1px;
+      box-shadow: none;
+    }
+  }
+
+  .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-light-ui/styles/text.less
+++ b/packages/atom-light-ui/styles/text.less
@@ -0,0 +1,78 @@
+h1,
+h2,
+h3 {
+  line-height: 1em;
+  margin-bottom: 15px
+}
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+
+p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: normal;
+}
+
+pre {
+  box-shadow: none;
+  color: @text-color;
+  background: @inset-panel-background-color;
+  border-radius: @component-border-radius;
+  border: none;
+  margin: 0;
+}
+
+code {
+  .text(highlight);
+  background: @background-color-highlight;
+  border-radius: @component-border-radius;
+}
+
+.selected { .text(highlight); }
+
+.text-smaller { font-size: 0.9em; }
+
+.text-subtle { .text(subtle); }
+.text-highlight { .text(highlight); }
+
+.text-error { .text(error); }
+.text-info {
+  .text(info);
+  &:hover { color: @text-color-info; }
+}
+.text-warning {
+  .text(warning);
+  &:hover { color: @text-color-warning; }
+}
+.text-success {
+  .text(success);
+  &:hover { color: @text-color-success; }
+}
+
+.highlight {
+  color: @text-color-highlight;
+  font-weight: bold;
+  text-shadow: none;
+  background-color: @background-color-highlight;
+  border-radius: @component-border-radius;
+  padding: 1px 3px;
+}
+
+.highlight-color(@name, @color) {
+  .highlight-@{name} {
+    color: @text-color-highlight;
+    font-weight: bold;
+    text-shadow: none;
+    background-color: @color;
+    border-radius: @component-border-radius;
+    padding: 1px 3px;
+  }
+}
+.highlight-color(info, @background-color-info);
+.highlight-color(warning, @background-color-warning);
+.highlight-color(error, @background-color-error);
+.highlight-color(success, @background-color-success);
--- a/packages/atom-light-ui/styles/tooltips.less
+++ b/packages/atom-light-ui/styles/tooltips.less
@@ -0,0 +1,48 @@
+.tooltip {
+  @tip-background-color: #333;
+  @tip-text-color: #fff;
+  white-space: nowrap;
+
+  .keystroke {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    color: #c0c0c0;
+    padding-left: 2px;
+  }
+
+  &.in { opacity: 1; }
+
+  .tooltip-inner {
+    line-height: 19px;
+    border-radius: @component-border-radius;
+    background-color: @tip-background-color;
+    color: @tip-text-color;
+    white-space: nowrap;
+    max-width: none;
+  }
+
+  &.top .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-left .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.top-right .tooltip-arrow {
+    border-top-color: @tip-background-color;
+  }
+  &.right .tooltip-arrow {
+    border-right-color: @tip-background-color;
+  }
+  &.left .tooltip-arrow {
+    border-left-color: @tip-background-color;
+  }
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    border-bottom-color: @tip-background-color;
+  }
+}
--- a/packages/atom-light-ui/styles/tree-view.less
+++ b/packages/atom-light-ui/styles/tree-view.less
@@ -0,0 +1,29 @@
+.tree-view {
+	font-size: @font-size;
+	background: @tree-view-background-color;
+
+	.selected:before {
+		background: #d0d0d0;
+	}
+}
+
+.tree-view-resizer {
+	.tree-view-resize-handle {
+		width: 8px;
+	}
+}
+
+.focusable-panel {
+	opacity: 1;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#e8ecf1), to(#ebebeb));
+	background-image: -webkit-linear-gradient(top, #e8ecf1, #ebebeb);
+
+	&:focus {
+		background-image: -webkit-gradient(linear, left top, left bottom, from(#e8ecf1),to(#d1d8e0));
+		background-image: -webkit-linear-gradient(top, #e8ecf1, #d1d8e0);
+
+		.selected:before {
+			background: @background-color-selected;
+		}
+	}
+}
--- a/packages/atom-light-ui/styles/ui-mixins.less
+++ b/packages/atom-light-ui/styles/ui-mixins.less
@@ -0,0 +1,38 @@
+// Pattern matching; ish is cray.
+// http://lesscss.org/#-pattern-matching-and-guard-expressions
+.text(normal) {
+  font-weight: normal;
+  color: @text-color;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+.text(subtle) {
+  font-weight: normal;
+  color: @text-color-subtle;
+  text-shadow: none;
+}
+.text(highlight) {
+  font-weight: normal;
+  color: @text-color-highlight;
+}
+.text(selected) {
+  font-weight: normal;
+  color: @text-color-selected;
+  text-shadow: none;
+}
+
+.text(info) {
+  color: @text-color-info;
+  text-shadow: none;
+}
+.text(success) {
+  color: @text-color-success;
+  text-shadow: none;
+}
+.text(warning) {
+  color: @text-color-warning;
+  text-shadow: none;
+}
+.text(error) {
+  color: @text-color-error;
+  text-shadow: none;
+}
--- a/packages/atom-light-ui/styles/ui-variables.less
+++ b/packages/atom-light-ui/styles/ui-variables.less
@@ -0,0 +1,90 @@
+// Colors
+
+@text-color: #444;
+@text-color-subtle: #999;
+@text-color-highlight: #000;
+@text-color-selected: #fff;
+
+@text-color-info: #5293d8;
+@text-color-success: #45A815;
+@text-color-warning: #CD8E00;
+@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: #ff4800;
+@background-color-error: #c00;
+@background-color-highlight: rgba(0, 0, 0, .1);
+@background-color-selected: #6aa5e9;
+
+@app-background-color: #ccc;
+
+@base-background-color: #f4f4f4;
+@base-border-color: #9f9f9f;
+
+@pane-item-background-color: @base-background-color;
+@pane-item-border-color: @base-border-color;
+
+@input-background-color: white;
+@input-border-color: fadeout(@base-border-color, 10%);
+
+@tool-panel-background-color: @base-background-color;
+@tool-panel-border-color: @base-border-color;
+
+@inset-panel-background-color: #fff;
+@inset-panel-border-color: fadeout(@base-border-color, 10%);
+
+@panel-heading-background-color: #c3c3c3;
+@panel-heading-border-color: transparent;
+
+@overlay-background-color: #ececec;
+@overlay-border-color: @base-border-color;
+
+@button-background-color: @base-background-color;
+@button-background-color-hover: lighten(@button-background-color, 5%);
+@button-background-color-selected: #888;
+@button-border-color: rgba(0, 0, 0, 0.15);
+
+@tab-bar-background-color: #d8d8d8;
+@tab-bar-border-color: #ddd;
+@tab-background-color: #e8e8e8;
+@tab-background-color-active: #f0f0f0;
+@tab-border-color: lighten(@base-border-color, 10%);
+
+@tree-view-background-color: #eee;
+@tree-view-border-color: @base-border-color;
+
+@scrollbar-background-color: #F9F9F9; // Needs to be opaque -> atom/atom/issues/4578
+@scrollbar-color: #C1C1C1;
+
+@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-light-ui/styles/utilities.less
+++ b/packages/atom-light-ui/styles/utilities.less
@@ -0,0 +1,17 @@
+.key-binding {
+  background: #fff;
+  border: 1px solid lighten(@base-border-color, 20%);
+  text-shadow: none;
+  display: inline-block;
+  line-height: 100%;
+  border-radius: @component-border-radius;
+  margin-left: @component-icon-padding;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: @font-size - 1px;
+  padding: @component-padding / 2;
+}
+
+.badge {
+  .text(highlight);
+  background: @background-color-highlight;
+}