Hello, Tia

frantic1048 · Mar 22, 2017 · 4ae754b · 4ae754b
commit 4ae754b
Show file tree

Hide file tree

Showing 24 changed files with 1,220 additions and 0 deletions.
diff --git a/.gitignore 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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); }