➡️ Migrate core package 'atom-light-ui' into ./packages

package.json

@@ -24,7 +24,7 @@
     "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",
+    "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": "0.29.1",
-    "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",

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** | [`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) |
+| **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] |  |

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.

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)

packages/atom-light-ui/index.less

@@ -0,0 +1,22 @@
+
+// Atom Dark 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";

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"
+  }
+}

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;
+  }
+}

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;
+}

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;
+  }
+}

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); }

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;
+}

packages/atom-light-ui/styles/messages.less

@@ -0,0 +1,4 @@
+ul.background-message {
+  font-weight: bold;
+  color: rgba(0, 0, 0, .18);
+}