Initial commit

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 TJ Holowaychuk
+
+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.

Readme.md

@@ -0,0 +1,18 @@
+![Apex Atom monochrome UI](https://dl.dropboxusercontent.com/u/6396913/Apex/Atom/apex-ui-logo.png)
+
+### Installation
+
+```
+$ apm install apex-ui
+```
+
+## Badges
+
+[![](http://apex.sh/images/badge.svg)](https://apex.sh/ping/)
+![](https://img.shields.io/badge/license-MIT-blue.svg)
+
+---
+
+> [tjholowaychuk.com](http://tjholowaychuk.com)  · 
+> GitHub [@tj](https://github.com/tj)  · 
+> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk)

index.less

@@ -0,0 +1,21 @@
+// UI Theme
+// -------------------
+@import "styles/ui-variables";
+@import "styles/helpers";
+
+@import "styles/base";
+@import "styles/buttons";
+@import "styles/editor";
+@import "styles/find-and-replace";
+@import "styles/git";
+@import "styles/key-binding";
+@import "styles/lists";
+@import "styles/panels";
+@import "styles/progress";
+@import "styles/settings-view";
+@import "styles/sites";
+@import "styles/status-bar";
+@import "styles/tabs";
+@import "styles/text";
+@import "styles/tooltips";
+@import "styles/tree-view";

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "apex-ui",
+  "theme": "ui",
+  "version": "0.0.1",
+  "description": "Apex monochrome theme UI inspired by iA Writer",
+  "keywords": [
+    "apex",
+    "monochrome",
+    "ui",
+    "ia",
+    "theme",
+    "writer"
+  ],
+  "repository": "https://github.com/apex/apex-ui",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}

styles/base.less

@@ -0,0 +1,66 @@
+// Base
+// -------------------
+// Used for global styles
+// Or to override certain Atom core styles
+// -------------------
+body {
+    font-size: @font-size;
+    color: @text-color;
+    background-color: @app-background-color;
+}
+
+atom-pane {
+    border-right: 1px solid @base-border-color;
+
+    &:last-child {
+        border-right: none;
+    }
+}
+
+atom-pane-container atom-pane .item-views > * {
+    top: 5px;
+    bottom: 5px;
+}
+
+// Icons -----------------------------------------
+.icon {
+    &::before {
+        position: relative;
+        top: 1px;
+    }
+}
+
+// Scrollbars ------------------------------------
+.scrollbars-visible-always {
+	/deep/ ::-webkit-scrollbar {
+		width: 5px;
+		height: 5px;
+	}
+
+	/deep/ ::-webkit-scrollbar-track {
+
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb {
+		border-radius: 5px;
+		border: 2px solid transparent;
+		background: @base-border-color;
+		background-clip: content-box;
+	}
+
+	/deep/ ::-webkit-scrollbar-corner {
+
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb:vertical:active {
+		border-radius: 0;
+		border-left-width: 0;
+		border-right-width: 0;
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb:horizontal:active {
+		border-radius: 0;
+		border-top-width: 0;
+		border-bottom-width: 0;
+	}
+}

styles/buttons.less

@@ -0,0 +1,87 @@
+// Buttons
+// -------------------
+// Overrides: atom/atom/static/buttons.less
+.btn {
+    color: lighten(@text-color, 6%);
+    background-color: @button-background-color;
+
+    &:focus,
+    &:hover {
+        color: @text-color-highlight;
+        background-color: @button-background-color-hover;
+    }
+
+    &:active {
+        color: fade(@text-color-selected, 66%);
+        background-color: darken(@button-background-color, 2%);
+    }
+
+    &.selected {
+        color: @text-color-selected;
+        background-color: @button-background-color-selected;
+    }
+
+    &:focus,
+    &:focus:active {
+        outline: none;
+    }
+
+    .icon {
+        &::before {
+            position: relative;
+            top: 1px;
+        }
+    }
+}
+// Colored buttons -----------------------
+.btn.btn-primary {
+    .btn-color(@background-color-success);
+}
+
+.btn.btn-info {
+    .btn-color(@background-color-info);
+}
+
+.btn.btn-success {
+    .btn-color(@background-color-success);
+}
+
+.btn.btn-warning {
+    .btn-color(@background-color-warning);
+}
+
+.btn.btn-error {
+    .btn-color(@background-color-error);
+}
+
+.btn-color(@bg) {
+    color: @text-color-selected;
+    background-color: @bg;
+
+    &:focus,
+    &:hover {
+        background-color: lighten(@bg, 4%);
+    }
+
+    &:active {
+        background-color: darken(@bg, 4%);
+    }
+
+    &.selected {
+        background-color: lighten(@bg, 4%);
+    }
+
+    &.selected:focus,
+    &.selected:hover {
+        background-color: lighten(@bg, 8%);
+    }
+}
+// Button Group -----------------------
+.btn-group > .btn {
+    .transition-03;
+    border-color: transparent;
+
+    &:hover {
+        background: @base-background-color;
+    }
+}

styles/editor.less

@@ -0,0 +1,52 @@
+// Editor
+atom-text-editor, :host {
+  background: @base-background-color;
+}
+
+body {
+  .transition;
+}
+
+// Editor blur
+.is-blurred {
+  -webkit-filter: grayscale();
+}
+
+// Mini Editor
+// -------------------
+// Mini Editors are the "text inputs" used in find+replace or in the settings.
+atom-text-editor[mini] {
+    padding-left: 5px;
+    font-size: .9rem;
+    color: @text-color;
+    background-color: @input-background-color;
+    border-bottom: 1px solid transparent;
+
+    &.is-focused {
+      border-bottom: 1px solid @base-border-color;
+      &::shadow {
+        .cursor {
+          display: block;
+        }
+      }
+    }
+    &,// <-- Deprecated. The `&,` can be removed once the Shadow DOM can't be turned off in the settings.
+
+    &::shadow {
+      .placeholder-text {
+        color: @text-color-subtle;
+      }
+
+      .selection .region {
+        background-color: @background-color-selected;
+      }
+
+      .cursor {
+        display: none;
+      }
+    }
+}
+
+atom-pane {
+  padding: @pane-padding;
+}

styles/find-and-replace.less

@@ -0,0 +1,10 @@
+
+// Find + Replace
+// -------------------
+
+// Find and replace in the current buffer or across the entire project.
+// Overrides: atom/find-and-replace
+
+.find-and-replace {
+  border-top: 1px solid @base-border-color;
+}

styles/git.less

@@ -0,0 +1,12 @@
+
+// Git
+// -------------------
+
+// Used to color git status
+
+.status          { color: @text-color; }
+.status-added    { color: @text-color-success; } // green
+.status-ignored  { color: @text-color-subtle; }  // faded
+.status-modified { color: @text-color-warning; } // orange
+.status-removed  { color: @text-color-error; }   // red
+.status-renamed  { color: @text-color-info; }    // blue

styles/helpers.less

@@ -0,0 +1,3 @@
+.transition-03 {
+    transition: 0.3s ease;
+}

styles/key-binding.less

@@ -0,0 +1,19 @@
+
+// Key Binding
+// -------------------
+
+// Styles key-bindings used in a Select List
+// Overrides: Bootstrap's `kbd`.
+
+
+.key-binding {
+  display: inline-block;
+  margin-left: 1px;
+  padding: 0 @component-padding/2;
+  line-height: 2;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: .8em;
+  letter-spacing: 1px;
+  border-radius: @component-border-radius;
+  background-color: @app-background-color;
+}