init commit

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.DS_Store?

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Arturo Alviar
+
+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,49 @@
+![Kecleon UI Theme](https://i.imgur.com/Ndjeakl.png)
+
+Just like the Pokemon Kecleon, this theme adapts to your syntax theme.
+Works well with light and dark themes.
+
+This theme was inspired by [Atom Material UI](https://github.com/atom-material/atom-material-ui).
+
+# Installation
+
+On your console:
+
+```
+apm install kecleon-ui
+```
+
+or install via Atom's settings install tab.
+
+# Screenshots
+The font seen in the screenshots is Hack.
+
+### One Light Syntax
+
+![One Light Syntax](https://i.imgur.com/WNE4fFY.png)
+
+
+### Hana Matcha Syntax ([see theme](https://github.com/arturoalviar/hana-matcha-syntax))
+
+```
+apm install hana-matcha-syntax
+```
+
+![Hana Match Syntax](https://i.imgur.com/r3Y3p9Y.png)
+
+### Serika Syntax ([see theme](https://github.com/arturoalviar/serika-syntax))
+
+```
+apm install serika-syntax
+```
+
+![Serika Syntax](https://i.imgur.com/H11Jg0O.png)
+
+
+### Nightmares Syntax ([see theme](https://github.com/arturoalviar/nightmares-syntax))
+
+```
+apm install nightmares-syntax
+```
+
+![Nightmares Syntax](https://i.imgur.com/Xg2OzVn.png)

index.less

@@ -0,0 +1,7 @@
+// Kecleon UI Theme
+// -------------------
+
+@import "styles/ui-variables";
+@import "styles/components/_index";
+@import "styles/layout/_index";
+@import "styles/settings/_index";

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "kecleon-ui",
+  "theme": "ui",
+  "version": "0.0.0",
+  "description": "A theme that adapts to your syntax theme.",
+  "keywords": [
+    "ui",
+    "theme",
+    "adaptive",
+    "adapt to syntax",
+    "dynamic"
+  ],
+  "repository": "https://github.com/arturoalviar/atom-theme-kecleon-ui",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}

styles/components/_index.less

@@ -0,0 +1,11 @@
+@import "alert";
+@import "buttons";
+@import "form-controls";
+@import "lists";
+@import "panels";
+@import "progress";
+@import "sites";
+@import "status-bar";
+@import "tabs";
+@import "tooltips";
+@import "tree-view";

styles/components/alert.less

@@ -0,0 +1,27 @@
+.alert, .settings-view .alert {
+  &-info, &-warning,
+  &-error, &-success,
+  &-danger {
+    background-color: fade(@text-color, 2%);
+  }
+
+  &-info {
+    border-color: @text-color-info;
+    color: @text-color-info;
+  }
+
+  &-warning {
+    border-color: @text-color-warning;
+    color: @text-color-warning;
+  }
+
+  &-error, &-danger {
+    border-color: @text-color-error;
+    color: @text-color-error;
+  }
+
+  &-success {
+    border-color: @text-color-success;
+    color: @text-color-success;
+  }
+}

styles/components/buttons.less

@@ -0,0 +1,87 @@
+
+// Buttons
+// -------------------
+
+// Overrides: atom/atom/static/buttons.less
+
+.btn-background (@color, @hover-color, @selected-color, @text-color) {
+  color: @text-color;
+  background: @color;
+
+  &:active, &:focus:active {
+    outline: none;
+  }
+
+  &:focus {
+    color: @text-color;
+  }
+
+  &:hover {
+    color: @text-color;
+    background: @color;
+  }
+
+  &:active, &:focus:active {
+    outline: none;
+  }
+
+  &.selected,
+  &.selected:hover {
+    color: @text-color;
+    background-color: @selected-color;
+  }
+}
+
+.btn-variant (@color, @text-color: @accent-text-color) {
+  @bg: @color;
+  @hover: @color;
+  @selected: darken(@color, 10%);
+  .btn-background(@bg, @hover, @selected, @text-color);
+}
+
+.btn {
+  color: @base-background-color;
+  background: @text-color;
+  outline: none;
+  transition: box-shadow .2s;
+  will-change: box-shadow;
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    outline: none;
+  }
+
+  .btn-group & {
+    box-shadow: none;
+  }
+}
+
+.btn-group {
+  align-items: center;
+}
+
+.btn.btn-primary {
+  .btn-variant(@base-color);
+}
+
+.btn.btn-info {
+  .btn-variant(@text-color-info);
+}
+
+.btn.btn-success {
+  .btn-variant(@text-color-success);
+}
+
+.btn.btn-warning {
+  .btn-variant(@text-color-warning, #000000);
+}
+
+.btn.btn-error {
+  .btn-variant(@text-color-error);
+}
+
+.caret {
+  border-top: 5px solid #fff;
+  margin-top: -1px;
+}

styles/components/form-controls.less

@@ -0,0 +1,25 @@
+.input-checkbox {
+  &:active {
+    background-color: @text-color;
+  }
+
+  &:checked {
+    background-color: @text-color;
+  }
+}
+
+.input-radio {
+  &:active,
+  &:checked,
+  &:focus {
+    background-color: @text-color;
+  }
+}
+
+.input-toggle:checked {
+  background-color: @text-color;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  background: @text-color;
+}

styles/components/lists.less

@@ -0,0 +1,87 @@
+
+// Lists
+// -------------------
+
+// Used in different places, like the Tree View, Commmand Palette etc.
+// Overrides: atom/static/lists.less
+
+// List Group -------------------
+.list-group {
+  li {
+    padding-left: @component-padding;
+
+    // We want to highlight the background of the list items because we dont know their size.
+    &.selected {
+      color: @text-color-selected;
+      background-color: @background-color-selected;
+      &:before {
+        display: none;
+      }
+    }
+  }
+}
+
+.list-group,
+.list-tree {
+  .icon::before {
+    font-size: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
+  .amu-compact-tree-view & {
+    .icon::before {
+      margin-left: -.5em;
+      margin-right: .75em;
+    }
+
+    &.has-collapsable-children {
+      .list-nested-item {
+        > .list-tree, > .list-group {
+          li {
+            padding-left: 1.25rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+// List Tree -------------------
+.list-tree {
+  color: @text-color;
+  .list-item {
+    &.selected {
+      color: @text-color-selected;
+    }
+  }
+}
+
+
+// Select List -------------------
+.select-list {
+  li {
+    padding: @component-padding/2 @component-padding;
+  }
+
+  .status {
+    float: right;
+  }
+}
+
+
+// Popover List -------------------
+// Used as a popover for something like autocomplete.
+.select-list.popover-list {
+  @popover-list-padding: @component-padding/2;
+  padding: @popover-list-padding;
+  border-radius: @component-border-radius;
+  background-color: @overlay-background-color;
+  box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
+
+  .list-group {
+    margin-top: @popover-list-padding;
+    li {
+      padding-left: @popover-list-padding;
+    }
+  }
+}

styles/components/panels.less

@@ -0,0 +1,27 @@
+
+// Panels
+// -------------------
+
+// Overrides: atom/static/panels.less
+
+.panel-heading {
+  border-bottom: 1px solid @panel-heading-border-color;
+  background-color: @panel-heading-background-color;
+}
+
+.inset-panel {
+  background-color: @inset-panel-background-color;
+  .panel-heading {
+    background-color: lighten(@inset-panel-background-color, 4%);
+  }
+}
+
+
+// Modal -------------------
+// Used on top of the editor, like the Command Palette.
+
+atom-panel.modal {
+  border: 1px solid @overlay-border-color;
+  border-top: none;
+  box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
+}