From e144a670f10b5f1542accc25f6877d03843c1cf6 Mon Sep 17 00:00:00 2001 From: arturoalviar Date: Wed, 24 Oct 2018 16:55:36 -0400 Subject: [PATCH] init commit --- .editorconfig | 14 ++++ .gitignore | 2 + LICENSE.md | 21 +++++ README.md | 49 +++++++++++ assets/svg/loader.svg | 5 ++ index.less | 7 ++ package.json | 18 +++++ styles/components/_index.less | 11 +++ styles/components/alert.less | 27 +++++++ styles/components/buttons.less | 87 ++++++++++++++++++++ styles/components/form-controls.less | 25 ++++++ styles/components/lists.less | 87 ++++++++++++++++++++ styles/components/panels.less | 27 +++++++ styles/components/progress.less | 95 ++++++++++++++++++++++ styles/components/sites.less | 25 ++++++ styles/components/status-bar.less | 14 ++++ styles/components/tabs.less | 116 +++++++++++++++++++++++++++ styles/components/tooltips.less | 30 +++++++ styles/components/tree-view.less | 34 ++++++++ styles/layout/_index.less | 6 ++ styles/layout/base.less | 43 ++++++++++ styles/layout/editor.less | 25 ++++++ styles/layout/find-and-replace.less | 10 +++ styles/layout/git.less | 32 ++++++++ styles/layout/key-binding.less | 19 +++++ styles/layout/text.less | 70 ++++++++++++++++ styles/settings/_index.less | 2 + styles/settings/layout.less | 20 +++++ styles/settings/package.less | 19 +++++ styles/ui-variables.less | 105 ++++++++++++++++++++++++ 30 files changed, 1045 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 assets/svg/loader.svg create mode 100644 index.less create mode 100644 package.json create mode 100644 styles/components/_index.less create mode 100644 styles/components/alert.less create mode 100644 styles/components/buttons.less create mode 100644 styles/components/form-controls.less create mode 100644 styles/components/lists.less create mode 100644 styles/components/panels.less create mode 100644 styles/components/progress.less create mode 100644 styles/components/sites.less create mode 100644 styles/components/status-bar.less create mode 100644 styles/components/tabs.less create mode 100644 styles/components/tooltips.less create mode 100644 styles/components/tree-view.less create mode 100644 styles/layout/_index.less create mode 100644 styles/layout/base.less create mode 100644 styles/layout/editor.less create mode 100644 styles/layout/find-and-replace.less create mode 100644 styles/layout/git.less create mode 100644 styles/layout/key-binding.less create mode 100644 styles/layout/text.less create mode 100644 styles/settings/_index.less create mode 100644 styles/settings/layout.less create mode 100644 styles/settings/package.less create mode 100644 styles/ui-variables.less diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..56f7073 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..481c824 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +.DS_Store? diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..17cf238 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..4145cbe --- /dev/null +++ b/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) diff --git a/assets/svg/loader.svg b/assets/svg/loader.svg new file mode 100644 index 0000000..c34c44e --- /dev/null +++ b/assets/svg/loader.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.less b/index.less new file mode 100644 index 0000000..88ad211 --- /dev/null +++ b/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"; diff --git a/package.json b/package.json new file mode 100644 index 0000000..7f42e27 --- /dev/null +++ b/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" + } +} diff --git a/styles/components/_index.less b/styles/components/_index.less new file mode 100644 index 0000000..15372b2 --- /dev/null +++ b/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"; diff --git a/styles/components/alert.less b/styles/components/alert.less new file mode 100644 index 0000000..c0cc617 --- /dev/null +++ b/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; + } +} diff --git a/styles/components/buttons.less b/styles/components/buttons.less new file mode 100644 index 0000000..cb5e525 --- /dev/null +++ b/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; +} diff --git a/styles/components/form-controls.less b/styles/components/form-controls.less new file mode 100644 index 0000000..9076507 --- /dev/null +++ b/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; +} diff --git a/styles/components/lists.less b/styles/components/lists.less new file mode 100644 index 0000000..7cf8f56 --- /dev/null +++ b/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; + } + } +} diff --git a/styles/components/panels.less b/styles/components/panels.less new file mode 100644 index 0000000..631e19b --- /dev/null +++ b/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); +} diff --git a/styles/components/progress.less b/styles/components/progress.less new file mode 100644 index 0000000..90e2b3f --- /dev/null +++ b/styles/components/progress.less @@ -0,0 +1,95 @@ + +// Progress +// ------------------- + +// The `progress` element is unstyled and defined by the OS. +// See https://css-tricks.com/html5-progress-element/ in case you want to customize it. + +progress[value] { + -webkit-appearance: none; + appearance: none; + + &::-webkit-progress-bar { + background-color: @base-background-color; + border: 1px solid @base-color; + } + + &::-webkit-progress-value { + background-color: @base-color; + } +} + +progress:not([value]) { + -webkit-appearance: none; + appearance: none; + position: relative; + overflow: hidden; + border: 1px solid @base-color; + &::-webkit-progress-bar { + background-color: @base-background-color; + } + &::before{ + content: ' '; + background: @base-color; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + animation: progress-expand 1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + } +} + +@keyframes progress-expand { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } +} + + + +// Spinner ------------------- + +.loading-spinner-large { + .loading-spinner(64px); +} + +.loading-spinner-medium { + .loading-spinner(48px); +} + +.loading-spinner-small { + .loading-spinner(32px); +} + +.loading-spinner-tiny { + .loading-spinner(16px); +} + + +.loading-spinner(@size) { + display: block; + width: @size; + height: @size; + background-image: url(atom://kecleon-ui/assets/svg/loader.svg); + background-repeat: repeat-x; + background-size: @size @size; + animation: spinner-animate 5s linear infinite; + &.inline-block { + display: inline-block; + } +} + +@keyframes spinner-animate { + from { + background-position: 0; + } + to { + background-position: 128px; + } +} diff --git a/styles/components/sites.less b/styles/components/sites.less new file mode 100644 index 0000000..ea98ea2 --- /dev/null +++ b/styles/components/sites.less @@ -0,0 +1,25 @@ + +// Site Colors +// ------------------- + +// Used when a few different/random colors are needed. + +.ui-site-1 { + background-color: @ui-site-color-1; +} + +.ui-site-2 { + background-color: @ui-site-color-2; +} + +.ui-site-3 { + background-color: @ui-site-color-3; +} + +.ui-site-4 { + background-color: @ui-site-color-4; +} + +.ui-site-5 { + background-color: @ui-site-color-5; +} diff --git a/styles/components/status-bar.less b/styles/components/status-bar.less new file mode 100644 index 0000000..b9c3267 --- /dev/null +++ b/styles/components/status-bar.less @@ -0,0 +1,14 @@ + +// Status Bar +// ------------------- + +// Located at the bottom. +// Displays information about the current editor. +// Overrides: atom/status-bar + +.status-bar { + font-size: @font-size; + color: @text-color; + border-top: 1px solid @base-border-color; + background-color: @tree-view-background-color; +} diff --git a/styles/components/tabs.less b/styles/components/tabs.less new file mode 100644 index 0000000..09bdddf --- /dev/null +++ b/styles/components/tabs.less @@ -0,0 +1,116 @@ + +// Tabs +// ------------------- + +// Displays selectable tabs above the editor. +// Overrides: atom/tabs + +.tab-bar { + background-color: @tab-bar-background-color; + border: 0; + overflow-x: auto; + overflow-y: hidden; + &::-webkit-scrollbar { + display: none; + } + + .tab { + background-color: @tab-background-color; + border: 0; + color: @text-color; + font-size: @font-size; + height: @tab-height; + line-height: @tab-height; + padding: 0 @component-padding; + overflow: hidden; + transition: all .1s ease-in; + &:after { + content: ''; + background-color: @tab-bar-border-color; + display: block; + width: 100%; + height: 3px; + position: absolute; + bottom: 0; + left: 0; + right: 0; + transform: translateY(3px); + transition: transform .3s ease-in; + } + + &.active { + color: @text-color-selected; + .close-icon { + transform: scale(1); + } + + &:after { + transform: translateY(0); + } + } + + &:hover { + .close-icon { + transform: scale(1); + } + } + + // Modified Icon (the circle) ------------------- + &.modified:not(:hover) .close-icon { + top: 50%; + right: @component-padding + 4px; // 4px -> half of icon size + margin-top: -3px; + border-color: @text-color; + + } + + &.modified:hover .close-icon { + color: currentColor; + } + + .title { + position: relative; + z-index: 1; + &:before { + display: flex; + justify-content: center; + align-items: center; + line-height: 1; + height: @tab-height; + } + } + + .close-icon { + color: @text-color; + cursor: pointer; + line-height: @tab-height; + right: @component-padding/2; + text-align: right; + transform: scale(0); + transition: transform .2s ease; + will-change: opacity; + z-index: 3; + + &:hover { + color: inherit; + } + } + + // Dragging ------------------- + // Styles get applied while dragging a tab + &.is-dragging { + background: darken(@tab-background-color, 10%); + border-color: transparent; + opacity: .5; + & .close-icon { + visibility: hidden; + } + } + } +} + +atom-pane .tab-bar .tab .title[data-path] { + &::before { + margin-right: @component-padding; + } +} diff --git a/styles/components/tooltips.less b/styles/components/tooltips.less new file mode 100644 index 0000000..acd90ad --- /dev/null +++ b/styles/components/tooltips.less @@ -0,0 +1,30 @@ + +// Tooltips +// ------------------- + +// Overrides: Bootstrap's `.tooltip`. + +.tooltip { + .tooltip-inner { + background-color: @text-color; + color: @base-background-color; + line-height: 1; + padding: .75em; + white-space: nowrap; + max-width: none; + } + + &.top { + .tooltip-arrow { + border-top-color: @text-color; + } + } + + .keystroke { + padding: .15em .4em; + margin: 0 -.3em 0 .25em; + border-radius: @component-border-radius; + color: @text-color-selected; + background: @background-color-selected; + } +} diff --git a/styles/components/tree-view.less b/styles/components/tree-view.less new file mode 100644 index 0000000..9179670 --- /dev/null +++ b/styles/components/tree-view.less @@ -0,0 +1,34 @@ + +// Tree View +// ------------------- + +// Used to explore and open files in the current project. +// Overrides: atom/tree-view + + +.tree-view-resizer { + border-right: 1px solid @base-border-color; +} + +.tree-view { + color: @text-color; + background-color: @tree-view-background-color; + .tree-view-root { + padding-left: 20px; + } + + .list-item { + &.selected { + color: @base-background-color; + &:before { + background: @text-color; + } + } + } +} + + +.list-tree.has-collapsable-children .list-nested-item > .list-tree > li, +.list-tree.has-collapsable-children .list-nested-item > .list-group > li { + padding-left: 16px; +} diff --git a/styles/layout/_index.less b/styles/layout/_index.less new file mode 100644 index 0000000..b9978fc --- /dev/null +++ b/styles/layout/_index.less @@ -0,0 +1,6 @@ +@import "base"; +@import "editor"; +@import "find-and-replace"; +@import "git"; +@import "key-binding"; +@import "text"; diff --git a/styles/layout/base.less b/styles/layout/base.less new file mode 100644 index 0000000..c88b916 --- /dev/null +++ b/styles/layout/base.less @@ -0,0 +1,43 @@ + +// Base +// ------------------- + +// Used for global styles +// Or to override certain Atom core styles + +// ------------------- + + +* { + box-sizing: border-box; +} + +.scrollbars-visible-always { + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-corner, + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: @scrollbar-color; + border-radius: 0; + } +} + +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; + } +} diff --git a/styles/layout/editor.less b/styles/layout/editor.less new file mode 100644 index 0000000..a8d47eb --- /dev/null +++ b/styles/layout/editor.less @@ -0,0 +1,25 @@ + +// Mini Editor +// ------------------- + +// Mini Editors are the "text inputs" used in find+replace or in the settings. + + +atom-text-editor[mini] { + background-color: @input-background-color; + border-radius: @component-border-radius; + color: @text-color; + position: relative; + padding-left: @component-padding/2; + &.is-focused { + background-color: darken(@input-background-color, 5%); + } + + .placeholder-text { + color: @text-color-subtle; + } + + .selection .region { + background-color: @background-color-selected; + } +} diff --git a/styles/layout/find-and-replace.less b/styles/layout/find-and-replace.less new file mode 100644 index 0000000..1cb6a21 --- /dev/null +++ b/styles/layout/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; +} diff --git a/styles/layout/git.less b/styles/layout/git.less new file mode 100644 index 0000000..9cdf4d6 --- /dev/null +++ b/styles/layout/git.less @@ -0,0 +1,32 @@ + +// Git +// ------------------- + +.status { + color: @text-color; +} + +// green +.status-added { + color: @text-color-success; +} + +// faded +.status-ignored { + color: @text-color-subtle; +} + +// orange +.status-modified { + color: @text-color-warning; +} + +// red +.status-removed { + color: @text-color-error; +} + +// blue +.status-renamed { + color: @text-color-info; +} diff --git a/styles/layout/key-binding.less b/styles/layout/key-binding.less new file mode 100644 index 0000000..5348a23 --- /dev/null +++ b/styles/layout/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; +} diff --git a/styles/layout/text.less b/styles/layout/text.less new file mode 100644 index 0000000..9819bdc --- /dev/null +++ b/styles/layout/text.less @@ -0,0 +1,70 @@ + +// Text +// ------------------- + +.text-smaller { + font-size: smaller; +} + +.text-subtle { + color: @text-color-subtle; +} + +.text-highlight { + color: @text-color-highlight; +} + +.text-info { + color: @text-color-info; +} + +.text-success { + color: @text-color-success; +} + +.text-warning { + color: @text-color-warning; +} + +.text-error { + color: @text-color-error; +} + + +// Highlights --------------- + +.highlight { + .highlight-mixin(@background-color-highlight); +} + +.highlight-info { + .highlight-mixin(@background-color-info); +} + +.highlight-warning { + .highlight-mixin(@background-color-warning); +} + +.highlight-error { + .highlight-mixin(@background-color-error); +} + +.highlight-success { + .highlight-mixin(@background-color-success); +} + +.highlight-mixin(@color) { + padding: 2px 5px; + color: @text-color-highlight; + border-radius: @component-border-radius; + background-color: @color; +} + + +// Background Message --------------- +// Shown when no tabs are open. + +.background-message { + font-weight: bold; + color: @text-color-subtle; +} diff --git a/styles/settings/_index.less b/styles/settings/_index.less new file mode 100644 index 0000000..20fad08 --- /dev/null +++ b/styles/settings/_index.less @@ -0,0 +1,2 @@ +@import "layout"; +@import "package"; diff --git a/styles/settings/layout.less b/styles/settings/layout.less new file mode 100644 index 0000000..86da52d --- /dev/null +++ b/styles/settings/layout.less @@ -0,0 +1,20 @@ +.settings-view { + .config-menu { + background: none; + + .nav li { + a { + padding: 1.25rem; + } + + &.active a { + background-color: @text-color; + color: @base-background-color; + } + } + + .icon::before { + margin-right: 1.25rem; + } + } +} diff --git a/styles/settings/package.less b/styles/settings/package.less new file mode 100644 index 0000000..7d949dc --- /dev/null +++ b/styles/settings/package.less @@ -0,0 +1,19 @@ +.settings-view { + .packages .search-container { + margin-bottom: 4rem; + } + + .package-card { + background-color: fade(@text-color, 3%); + border-radius: @component-border-radius; + margin-bottom: 1.5rem; + &.disabled { + background-color: fade(@text-color, 3%); + opacity: .5; + } + + &:hover { + background-color: fade(@text-color, 3%); + } + } +} diff --git a/styles/ui-variables.less b/styles/ui-variables.less new file mode 100644 index 0000000..7bb7d15 --- /dev/null +++ b/styles/ui-variables.less @@ -0,0 +1,105 @@ +@import "syntax-variables"; + +// UI Variables +// ------------------- + +// These are the official UI variables that every UI theme should define. +// It allows other packages to match your theme. + +// Overrides: atom/static/variables/ui-variables.less + +// Try to edit some of the values below to see your theme change. +// A good start is to change the color of the `@base-background-color` variable. + +// Main color variables – default values +@accent-color: #FFFFFF; +@accent-text-color: rgba(255,255,255,0.8); +@base-color: #bf5375; + +// Text Colors +@text-color: @syntax-text-color; +@text-color-subtle: fade(@syntax-text-color, 35%); +@text-color-highlight: @syntax-text-color; +@text-color-selected: @darken(@text-color, 2%); + +// Colors from Bulma +// See https://bulma.io/documentation/overview/colors/ +@text-color-info: hsl(204, 86%, 53%); +@text-color-success: hsl(141, 71%, 48%); +@text-color-warning: hsl(48, 100%, 67%); +@text-color-error: hsl(348, 100%, 61%); + +// Background colors +@background-color-info: hsl(208, 100%, 50%); +@background-color-success: hsl(160, 70%, 36%); +@background-color-warning: hsl(32, 60%, 50%); +@background-color-error: hsl(0, 70%, 50%); + +@background-color-highlight: lighten(@base-background-color, 5%); +@background-color-selected: lighten(@base-background-color, 10%); + +@app-background-color: @syntax-background-color; + +// Base colors +@base-background-color: @app-background-color; +@base-border-color: transparent; + +// Component colors +@pane-item-background-color: @base-background-color; +@pane-item-border-color: @base-border-color; + +@input-background-color: @base-background-color; +@input-border-color: @base-border-color; + +@tool-panel-background-color: @base-background-color; +@tool-panel-border-color: @base-border-color; + +@inset-panel-background-color: lighten(@base-background-color, 2%); +@inset-panel-border-color: @base-border-color; + +@panel-heading-background-color: lighten(@base-background-color, 2%); +@panel-heading-border-color: @base-border-color; + +@overlay-background-color: lighten(@base-background-color, 5%); +@overlay-border-color: @base-border-color; + +@button-background-color: lighten(@base-background-color, 5%); +@button-background-color-hover: lighten(@button-background-color, 8%); +@button-background-color-selected: @button-background-color-hover; +@button-border-color: @base-border-color; + +@tab-bar-background-color: @base-background-color; +@tab-bar-border-color: @text-color; +@tab-background-color: @tab-bar-background-color; +@tab-background-color-active: @base-background-color; +@tab-border-color: @base-border-color; +@tab-height: 50px; +@tab-padding: 20px; + +@tree-view-background-color: @base-background-color; +@tree-view-border-color: @base-border-color; + +@scrollbar-background-color: @base-background-color; +@scrollbar-color: fade(@text-color, 15%); + +// Site colors +@ui-site-color-1: @background-color-info; // blue +@ui-site-color-2: @background-color-success; // green +@ui-site-color-3: @background-color-warning; // orange +@ui-site-color-4: #AB47BC; // pink +@ui-site-color-5: #FFF176; // yellow + +// Sizes +@font-size: 12px; +@input-font-size: @font-size; + +@disclosure-arrow-size: 12px; + +@component-padding: 10px; +@component-icon-padding: 16px; +@component-icon-size: 16px; +@component-line-height: 26px; +@component-border-radius: .15rem; + + +@font-family: '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;