From 4ae754bb37ab801de982a94688b69f83b6ab565a Mon Sep 17 00:00:00 2001
From: frantic1048 <archer@frantic1048.com>
Date: Thu, 21 Jul 2016 22:40:06 +0800
Subject: [PATCH] Hello, Tia

---
 .gitignore               |  33 ++++++++++
 README.md                |  32 ++++++++++
 index.less               |  17 +++++
 package.json             |  11 ++++
 styles/atom.less         |  34 ++++++++++
 styles/buttons.less      |  56 +++++++++++++++++
 styles/dropdowns.less    |  19 ++++++
 styles/editor.less       | 121 ++++++++++++++++++++++++++++++++++++
 styles/git.less          |   9 +++
 styles/lists.less        | 130 +++++++++++++++++++++++++++++++++++++++
 styles/messages.less     |   6 ++
 styles/nav.less          |  27 ++++++++
 styles/overlays.less     |  41 ++++++++++++
 styles/panels.less       | 105 +++++++++++++++++++++++++++++++
 styles/panes.less        |  21 +++++++
 styles/progress.less     |  72 ++++++++++++++++++++++
 styles/sites.less        |  14 +++++
 styles/tabs.less         |  95 ++++++++++++++++++++++++++++
 styles/text.less         |  89 +++++++++++++++++++++++++++
 styles/tooltips.less     |  50 +++++++++++++++
 styles/tree-view.less    |  33 ++++++++++
 styles/ui-mixins.less    |  64 +++++++++++++++++++
 styles/ui-variables.less | 120 ++++++++++++++++++++++++++++++++++++
 styles/utilities.less    |  21 +++++++
 24 files changed, 1220 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 index.less
 create mode 100644 package.json
 create mode 100644 styles/atom.less
 create mode 100644 styles/buttons.less
 create mode 100644 styles/dropdowns.less
 create mode 100644 styles/editor.less
 create mode 100644 styles/git.less
 create mode 100644 styles/lists.less
 create mode 100644 styles/messages.less
 create mode 100644 styles/nav.less
 create mode 100644 styles/overlays.less
 create mode 100644 styles/panels.less
 create mode 100644 styles/panes.less
 create mode 100644 styles/progress.less
 create mode 100644 styles/sites.less
 create mode 100644 styles/tabs.less
 create mode 100644 styles/text.less
 create mode 100644 styles/tooltips.less
 create mode 100644 styles/tree-view.less
 create mode 100644 styles/ui-mixins.less
 create mode 100644 styles/ui-variables.less
 create mode 100644 styles/utilities.less

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..665485c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Dolphin
+.directory
+
+build
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..980206c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,32 @@
+# Tia UI theme
+
+An edge-less UI theme for Atom.
+
+This theme is in early stage. Don't use.
+
+TODO:
+
+- button style
+- cursor style
+- linter inline notify style
+- setting options support
+- ヾ(ﾟ∀ﾟ○)ﾂ
+
+---
+
+Ok, you really want to use now ?
+
+```bash
+apm install frantic1048/Tia-ui
+```
+
+Enable Tia ui theme in Atom settings.
+
+Add follow line to your custom stylesheet, replace `<path to your loving image>` as you want. If needed, also add background-<option> to perfectly fit your flavor:
+
+```less
+atom-workspace {
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
+  url("<path to your loving image>");
+}
+```
diff --git a/index.less b/index.less
new file mode 100644
index 0000000..7d79350
--- /dev/null
+++ b/index.less
@@ -0,0 +1,17 @@
+@import "styles/atom";
+@import "styles/buttons";
+@import "styles/editor";
+@import "styles/git";
+@import "styles/lists";
+@import "styles/messages";
+@import "styles/nav";
+@import "styles/overlays";
+@import "styles/panels";
+@import "styles/panes";
+@import "styles/progress";
+@import "styles/sites";
+@import "styles/tabs";
+@import "styles/text";
+@import "styles/tooltips";
+@import "styles/tree-view";
+@import "styles/utilities";
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..08f2074
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "Tia-ui",
+  "theme": "ui",
+  "version": "0.0.1",
+  "description": "An edge-less UI theme for Atom",
+  "license": "WTFPL",
+  "repository": "https://github.com/atom/Tia-ui",
+  "engines": {
+    "atom": ">0.40.0"
+  }
+}
diff --git a/styles/atom.less b/styles/atom.less
new file mode 100644
index 0000000..9aa656c
--- /dev/null
+++ b/styles/atom.less
@@ -0,0 +1,34 @@
+@import "ui-variables";
+
+* {
+	box-sizing: border-box;
+}
+
+*::selection {
+	background:fade(lighten(@background-color-info, 20%), 25%);
+}
+
+atom-workspace {
+	font-family: @font-family;
+	.background(window);
+}
+
+.scrollbars-visible-always {
+  /deep/ ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  /deep/ ::-webkit-scrollbar-track,
+  /deep/ ::-webkit-scrollbar-corner {
+		opacity: 0;
+  }
+
+  /deep/ ::-webkit-scrollbar-thumb {
+    background-color: @scrollbar-color;
+		transition: all 0.3s ease;
+		&:hover{
+	    background-color: @scrollbar-color-active;
+	  }
+  }
+}
diff --git a/styles/buttons.less b/styles/buttons.less
new file mode 100644
index 0000000..0824580
--- /dev/null
+++ b/styles/buttons.less
@@ -0,0 +1,56 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.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;
+}
diff --git a/styles/dropdowns.less b/styles/dropdowns.less
new file mode 100644
index 0000000..270a1ff
--- /dev/null
+++ b/styles/dropdowns.less
@@ -0,0 +1,19 @@
+@import "ui-variables";
+@import "ui-mixins";
+@import "octicon-mixins";
+
+.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;
+  }
+}
diff --git a/styles/editor.less b/styles/editor.less
new file mode 100644
index 0000000..df29a9e
--- /dev/null
+++ b/styles/editor.less
@@ -0,0 +1,121 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+atom-text-editor[mini], atom-text-editor[mini]::shadow {
+  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, atom-text-editor[mini].is-focused::shadow {
+  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, atom-text-editor::shadow {
+  .background(editor);
+
+  // wrap-guide not cool
+  .wrap-guide {
+    opacity:0;
+  }
+
+  .line{
+    &.cursor-line{
+      border-bottom:1px solid lighten(@text-color-info, 5%);
+      background: fade(@background-color-info, 10%);
+      &>span{
+      }
+    }
+  }
+
+  .comment {
+    color: @text-color-subtle;
+  }
+
+  .highlight.selection>.region{
+    z-index: 10;
+    background:fade(@background-color-info, 15%);
+
+    // HACK:
+    // I meant to show left/right border
+    // for first/last line
+    // of a block of selection
+    // but *-of-type cannot achieve this.
+    // because blank line causes a new `section`
+    transform: translate3d(-3px, 0, 0);
+
+    &:first-of-type {
+      border-left:3px solid lighten(@text-color-info, 5%);
+    }
+    &:last-of-type {
+      border-right:3px solid lighten(@text-color-info, 5%);
+    }
+  }
+
+  .highlight.bracket-matcher .region{
+    z-index: 11;
+    border-bottom:5px solid @text-color-success;
+    border-top:1px solid @text-color-success;
+    border-right:1px solid @text-color-success;
+    border-left:1px solid @text-color-success;
+  }
+
+  .gutter{
+    background: @editor-gutter-background-color;
+    &[gutter-name="linter"] {
+      position: absolute;
+      transform: translate3d(-6px, 0, 0);
+      min-width: 6px; // overide Atom preseted gutter min-witdh
+      max-width: 6px;
+      background: none;
+      .custom-decorations {
+        background: none !important;
+        .linter-row{
+          background: @background-color-error;
+          box-shadow: 0 0 3px fade(@background-color-error, 40%);
+          .linter-gutter { display: none; }
+        }
+      }
+    }
+    .line-numbers{
+      background:transparent !important;
+    }
+    .line-number{
+      color: @text-color;
+      &.cursor-line{
+        background: @background-color-info;
+        border-bottom:1px solid @background-color-info;
+        box-shadow: 0 0 3px @background-color-info;
+      }
+   }
+   .line-number.git-line-modified{
+     border-left-color:darken(@text-color-modified, 15%);
+     border-left-width:3px;
+     &.cursor-line {
+       border-left-color: @text-color-modified;
+     }
+   }
+   .line-number.git-line-added{
+     border-left-color: darken(@text-color-added, 15%);
+     border-left-width: 3px;
+     &.cursor-line {
+       border-left-color: @text-color-added;
+     }
+   }
+   .line-number.git-line-removed{
+     border-left-color: darken(@text-color-removed, 15%);
+     border-left-width: 3px;
+     &.cursor-line {
+       border-left-color: @text-color-removed;
+     }
+   }
+  }
+}
diff --git a/styles/git.less b/styles/git.less
new file mode 100644
index 0000000..38c7878
--- /dev/null
+++ b/styles/git.less
@@ -0,0 +1,9 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.status { .text(normal); }
+.status-added { .text(success); }
+.status-ignored { .text(subtle); }
+.status-modified { .text(warning); }
+.status-removed { .text(error); }
+.status-renamed { .text(info); }
diff --git a/styles/lists.less b/styles/lists.less
new file mode 100644
index 0000000..b10c786
--- /dev/null
+++ b/styles/lists.less
@@ -0,0 +1,130 @@
+@import "ui-variables";
+@import "ui-mixins";
+@import "octicon-mixins";
+
+.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;
+}
diff --git a/styles/messages.less b/styles/messages.less
new file mode 100644
index 0000000..914737d
--- /dev/null
+++ b/styles/messages.less
@@ -0,0 +1,6 @@
+@import "ui-variables";
+
+ul.background-message {
+  font-weight: bold;
+  color: rgba(0, 0, 0, .2);
+}
diff --git a/styles/nav.less b/styles/nav.less
new file mode 100644
index 0000000..2e50042
--- /dev/null
+++ b/styles/nav.less
@@ -0,0 +1,27 @@
+@import "ui-variables";
+
+.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;
+    }
+  }
+}
diff --git a/styles/overlays.less b/styles/overlays.less
new file mode 100644
index 0000000..8180e31
--- /dev/null
+++ b/styles/overlays.less
@@ -0,0 +1,41 @@
+@import "ui-variables";
+
+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;
+        }
+      }
+    }
+  }
+}
diff --git a/styles/panels.less b/styles/panels.less
new file mode 100644
index 0000000..bd6ec59
--- /dev/null
+++ b/styles/panels.less
@@ -0,0 +1,105 @@
+@import "ui-mixins";
+@import "ui-variables";
+@import "buttons";
+
+.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 {
+  }
+
+  &.left, &.panel-left {
+  }
+
+  &.right, &.panel-right {
+  }
+}
+
+.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;
+
+  .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);
+  }
+}
+
+/**
+ * Status bar
+ * normally in foot panel
+ */
+status-bar {
+  .status-bar-left,
+  .status-bar-right,
+  .deprecation-cop-status,
+  linter-bottom-container {
+    display: flex;
+    align-items: center;
+  }
+
+  linter-bottom-container {
+    linter-bottom-tab {
+      background: @tab-bar-tab-background-color;
+      border: none;
+      border-bottom: 2px solid @tab-bar-tab-background-color;
+      &.active {
+        background: fade(lighten(@base-background-color, 30%), 30%);
+        border-bottom: 2px solid @text-color-info;
+        transition: border-color 0.2s ease;
+      }
+      &:active {
+        border-color: fade(lighten(@base-background-color, 60%), 80%);
+      }
+    }
+    linter-bottom-status {
+      height: 16px;
+    }
+  }
+
+  // Git status
+  [is="status-bar-git"] {
+    display: flex;
+    align-items: center;
+    .git-branch {
+      display: flex;
+      align-items: center;
+    }
+    .git-status {
+      height: 26px;
+      line-height: 26px;
+    }
+  }
+}
diff --git a/styles/panes.less b/styles/panes.less
new file mode 100644
index 0000000..a27be61
--- /dev/null
+++ b/styles/panes.less
@@ -0,0 +1,21 @@
+@import "ui-mixins";
+@import "ui-variables";
+@import "buttons";
+
+.pane-item {
+  .panel {
+  }
+}
+
+atom-pane-container {
+  atom-pane {
+  }
+
+  atom-pane-axis.horizontal > * {
+    // horizontal pane splitter line
+  }
+
+  atom-pane-axis.vertical > * {
+    // vertical pane splitter line
+  }
+}
diff --git a/styles/progress.less b/styles/progress.less
new file mode 100644
index 0000000..1ac4792
--- /dev/null
+++ b/styles/progress.less
@@ -0,0 +1,72 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.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; }
+}
diff --git a/styles/sites.less b/styles/sites.less
new file mode 100644
index 0000000..fa79d92
--- /dev/null
+++ b/styles/sites.less
@@ -0,0 +1,14 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.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);
diff --git a/styles/tabs.less b/styles/tabs.less
new file mode 100644
index 0000000..b888323
--- /dev/null
+++ b/styles/tabs.less
@@ -0,0 +1,95 @@
+@modified-icon-width: 8px;
+@tab-top-padding: 0px;
+@tab-bottom-border-height: 5px;
+@tab-border: 1px solid @tab-border-color;
+@tab-max-width: 160px;
+
+.tab-bar {
+  height: @tab-height;
+  background: @tab-bar-background-color;
+  padding: 0 10px 0 0px;
+  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 6px;
+    color: @text-color;
+
+    transition: color .1s ease-in;
+    background-color: @tab-bar-tab-background-color;
+
+    .close-icon {
+      right: 6px;
+      z-index: 3;
+      text-align: right;
+      line-height: @tab-height;
+      color: @text-color;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+
+    &.modified:not(:hover) .close-icon {
+      right: 6px;
+      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;
+      padding-right: 10px;
+    }
+  }
+
+  .tab.active {
+    z-index: 1;
+    color: @text-color-highlight;
+    height: @tab-height + 1px;
+    background: fade(lighten(@base-background-color, 30%), 30%);
+    border-bottom: 3px solid @text-color-info;
+    transition: border-color 0.3s ease;
+
+    .close-icon {
+      line-height: @tab-height - 1px;
+      color: @text-color;
+    }
+  }
+
+  .tab:hover {
+    color: @text-color-highlight;
+    background: fade(lighten(@base-background-color, 35%), 30%);
+  }
+
+  .tab.active:hover .close-icon {
+    color: @text-color;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .placeholder {
+    height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
+    margin-left: -9px; // center between tabs
+    pointer-events: none;
+    &:after {
+      top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px;
+    }
+  }
+}
diff --git a/styles/text.less b/styles/text.less
new file mode 100644
index 0000000..9710f9a
--- /dev/null
+++ b/styles/text.less
@@ -0,0 +1,89 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+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%);
+}
diff --git a/styles/tooltips.less b/styles/tooltips.less
new file mode 100644
index 0000000..df87172
--- /dev/null
+++ b/styles/tooltips.less
@@ -0,0 +1,50 @@
+@import "ui-variables";
+
+.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;
+  }
+}
diff --git a/styles/tree-view.less b/styles/tree-view.less
new file mode 100644
index 0000000..d12dcb5
--- /dev/null
+++ b/styles/tree-view.less
@@ -0,0 +1,33 @@
+@import "ui-variables";
+
+.tree-view {
+  font-size: @font-size;
+  background: @tree-view-background-color;
+
+  .selected:before {
+    background: @background-color-selected;
+    box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
+  }
+}
+
+.tree-view-resizer {
+  .tree-view-resize-handle {
+    width: 8px;
+  }
+}
+
+.focusable-panel {
+  opacity: 1;
+
+  &:focus {
+    .selected:before {
+      background: @background-color-selected;
+    }
+  }
+}
+
+[data-show-on-right-side=true] {
+  .tree-view .selected:before,
+  .focusable-panel {
+  }
+}
diff --git a/styles/ui-mixins.less b/styles/ui-mixins.less
new file mode 100644
index 0000000..f6a2a99
--- /dev/null
+++ b/styles/ui-mixins.less
@@ -0,0 +1,64 @@
+@import "ui-variables";
+
+// 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;
+}
+
+.background(cursor) {
+  background-image: @cursor-background-image;
+  background-position: @cursor-background-position;
+  background-size: @cursor-background-size;
+  background-repeat: @cursor-background-repeat;
+  background-attachment: @cursor-background-attachment;
+  background-color: @cursor-background-color;
+}
+.background(editor) {
+  background-image: @editor-background-image;
+  background-position: @editor-background-position;
+  background-size: @editor-background-size;
+  background-repeat: @editor-background-repeat;
+  background-attachment: @editor-background-attachment;
+  background-color: @editor-background-color;
+}
+.background(window) {
+  background-image: @window-background-image;
+  background-position: @window-background-position;
+  background-size: @window-background-size;
+  background-repeat: @window-background-repeat;
+  background-attachment: @window-background-attachment;
+  background-color: @window-background-color;
+}
diff --git a/styles/ui-variables.less b/styles/ui-variables.less
new file mode 100644
index 0000000..a43981f
--- /dev/null
+++ b/styles/ui-variables.less
@@ -0,0 +1,120 @@
+// Colors
+
+@text-color: #eee;
+@text-color-subtle: #cdcdcd;
+@text-color-highlight: #fff;
+@text-color-selected: @text-color-highlight;
+
+@text-color-info: rgb(115, 44, 213);
+@text-color-success: #82FF58;
+@text-color-warning: #FFC46B;
+@text-color-error: #f9193b;
+
+@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: rgb(115, 44, 213);
+@background-color-success: rgb(172,255,63);
+@background-color-warning: #FFC46B;
+@background-color-error: #f9193b;
+@background-color-highlight: rgba(255, 255, 255, 0.07);
+@background-color-selected: fade(@background-color-info, 40%);
+
+@app-background-color: #333;
+
+@base-background-color: rgba(0, 0, 0, 0.1);
+@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: rgba(29,30,33,0);
+@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: rgba(0, 0, 0, 0);
+@tab-bar-border-color: darken(@tab-background-color-active, 10%);
+@tab-bar-tab-background-color: rgba(0, 0, 0, 0.1);
+@tab-background-color: #333;
+@tab-background-color-active: #222;
+@tab-border-color: #484848;
+
+@tree-view-background-color: rgba(0, 0, 0, 0);
+@tree-view-border-color: @tool-panel-border-color;
+
+@scrollbar-background-color: rgba(0, 0, 0, 0.25);
+@scrollbar-color: rgba(0, 0, 0, 0.4);
+@scrollbar-color-active: fade(lighten(@background-color-info, 5%), 60%);
+
+@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: 1px;
+
+@tab-height: 26px;
+
+
+// Other
+
+@font-family: "Source Han Sans SC Light","文泉驿等宽微米黑","Symbolla",sans-serif;
+
+@cursor-background-image: url("");
+@cursor-background-position: center center;
+@cursor-background-size: cover;
+@cursor-background-repeat: no-repeat;
+@cursor-background-attachment: scroll;
+@cursor-background-color: rgba(0,0,0,0);
+
+@editor-background-image: url("");
+@editor-background-position: center center;
+@editor-background-size: cover;
+@editor-background-repeat: no-repeat;
+@editor-background-attachment: scroll;
+@editor-background-color: rgba(0, 0, 0, 0);
+
+@window-background-image: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
+                          url("<path to your loving image>);
+@window-background-position: center, top center;
+@window-background-size: cover;
+@window-background-repeat: no-repeat;
+@window-background-attachment: fixed;
+@window-background-color: @app-background-color;
+
+@line-background: rgba(255,255,255,0.1);
+@line-text-background: rgba(0,0,0,0);
+
+@editor-gutter-background-color: rgba(0, 0, 0, 0);
diff --git a/styles/utilities.less b/styles/utilities.less
new file mode 100644
index 0000000..c86dc1d
--- /dev/null
+++ b/styles/utilities.less
@@ -0,0 +1,21 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.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;
+}