diff options
Diffstat (limited to 'themer/gen/themer-atom-ui/themer-dark-ui')
18 files changed, 443 insertions, 0 deletions
diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/index.less b/themer/gen/themer-atom-ui/themer-dark-ui/index.less new file mode 100644 index 0000000..2ec5221 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/index.less @@ -0,0 +1,17 @@ + +@import "styles/ui-variables"; +@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/sites"; +@import "styles/status-bar"; +@import "styles/tabs"; +@import "styles/text"; +@import "styles/tooltips"; +@import "styles/tree-view"; diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/package.json b/themer/gen/themer-atom-ui/themer-dark-ui/package.json new file mode 100644 index 0000000..61f4e81 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/package.json @@ -0,0 +1,14 @@ +{ + "name": "themer-dark-ui", + "theme": "ui", + "version": "1.0.5", + "description": "Personalized Atom UI theme, generated by themer.", + "keywords": [ + "themer", + "ui", + "theme" + ], + "engines": { + "atom": ">=1.0.0 <2.0.0" + } +}
\ No newline at end of file diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/base.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/base.less new file mode 100644 index 0000000..b72bfba --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/base.less @@ -0,0 +1,13 @@ + +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/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less new file mode 100644 index 0000000..e33fd93 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less @@ -0,0 +1,52 @@ + +.btn { + color: lighten(@text-color, 6%); + background-color: @button-background-color; + &:hover, + &:focus { + 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; + } +} + +.btn.btn-primary { .btn-color(@background-color-info); } +.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: @base-background-color; + background-color: @bg; + &:hover, + &:focus { + background-color: lighten(@bg, 4%); + color: @base-background-color; + } + &:active { + background-color: darken(@bg, 4%); + } + &.selected { + background-color: lighten(@bg, 4%); + } + &.selected:focus, + &.selected:hover { + background-color: lighten(@bg, 8%); + } +} + +.btn-group > .btn { + border-color: hsla(0,0%,0%,.2);; +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/editor.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/editor.less new file mode 100644 index 0000000..0026162 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/editor.less @@ -0,0 +1,19 @@ + +atom-text-editor[mini] { + padding-left: @component-padding/2; + color: @text-color; + border-radius: @component-border-radius; + background-color: @input-background-color; + + &.is-focused { + background-color: @input-background-color; + border: 1px solid @accent4; + } + + .placeholder-text { + color: @text-color-subtle; + } + .selection .region { + background-color: @background-color-selected; + } +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/find-and-replace.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/find-and-replace.less new file mode 100644 index 0000000..4f52e61 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/find-and-replace.less @@ -0,0 +1,4 @@ + +.find-and-replace { + border-top: 1px solid @base-border-color; +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/git.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/git.less new file mode 100644 index 0000000..5293a1c --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/git.less @@ -0,0 +1,7 @@ + +.status { color: @text-color; } +.status-added { color: @text-color-success; } +.status-ignored { color: @text-color-subtle; } +.status-modified { color: @text-color-warning; } +.status-removed { color: @text-color-error; } +.status-renamed { color: @text-color-info; } diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/key-binding.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/key-binding.less new file mode 100644 index 0000000..f0f8726 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/key-binding.less @@ -0,0 +1,12 @@ + +.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/themer/gen/themer-atom-ui/themer-dark-ui/styles/lists.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/lists.less new file mode 100644 index 0000000..3a00056 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/lists.less @@ -0,0 +1,43 @@ + +.list-group { + li { + padding-left: @component-padding/2; + + &.selected { + color: @text-color-selected; + background-color: @background-color-selected; + &:before{ display: none; } + } + } +} + +.list-tree { + .selected { + color: @text-color-selected; + } +} + +.select-list { + li { + padding: @component-padding/2 @component-padding; + } + .status { + float: right; + } +} + +.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/themer/gen/themer-atom-ui/themer-dark-ui/styles/panels.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/panels.less new file mode 100644 index 0000000..ba24aba --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/panels.less @@ -0,0 +1,18 @@ + +.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%); + } +} + +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/themer/gen/themer-atom-ui/themer-dark-ui/styles/progress.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/progress.less new file mode 100644 index 0000000..95b74e1 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/progress.less @@ -0,0 +1,17 @@ + +.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(images/octocat-spinner-128.gif); + background-repeat: no-repeat; + background-size: @size @size; + &.inline-block { + display: inline-block; + } +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/sites.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/sites.less new file mode 100644 index 0000000..fd20a9a --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/sites.less @@ -0,0 +1,6 @@ + +.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/themer/gen/themer-atom-ui/themer-dark-ui/styles/status-bar.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/status-bar.less new file mode 100644 index 0000000..556da44 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/status-bar.less @@ -0,0 +1,7 @@ + +.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/themer/gen/themer-atom-ui/themer-dark-ui/styles/tabs.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tabs.less new file mode 100644 index 0000000..d7d1bcd --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tabs.less @@ -0,0 +1,44 @@ + +.tab-bar { + background-color: @tab-bar-background-color; + border-bottom: 1px solid @base-border-color; + + .tab { + color: @text-color; + height: @tab-height; + line-height: @tab-height; + font-size: @font-size; + border-right: 1px solid @tab-border-color; + background-color: @tab-background-color; + &.active { + color: @text-color-selected; + background-color: @tab-background-color-active; + } + + &.modified:not(:hover) .close-icon { + top: 50%; + right: @component-padding + 4px; // 4px -> half of icon size + margin-top: -3px; + border-color: @text-color-info; + } + &.modified:hover .close-icon { + color: currentColor; + } + + .close-icon:hover { + color: @text-color-error; + } + &.active .close-icon:hover { + color: @text-color-error; + } + + &.is-dragging { + background: darken(@tab-background-color, 10%); + border-color: transparent; + opacity: .5; + & .close-icon { + visibility: hidden; + } + } + } +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/text.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/text.less new file mode 100644 index 0000000..b1baaf2 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/text.less @@ -0,0 +1,31 @@ + +.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; } + +.highlight { .highlight-mixin(@background-color-highlight, @text-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(@bg, @fg: @app-background-color) { + font-weight: normal; + padding: 1px 4px; + color: @fg; + border-radius: @component-border-radius; + background-color: @bg; +} + +.background-message { + font-weight: bold; + color: @text-color-subtle; +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/tooltips.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tooltips.less new file mode 100644 index 0000000..bcecabb --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tooltips.less @@ -0,0 +1,17 @@ + +.tooltip { + .tooltip-inner { + line-height: 1; + padding: .75em; + white-space: nowrap; + max-width: none; + } + + .keystroke { + padding: .15em .4em; + margin: 0 -.3em 0 .25em; + border-radius: max(2px, @component-border-radius / 2); + color: @text-color-selected; + background: @background-color-selected; + } +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/tree-view.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tree-view.less new file mode 100644 index 0000000..d1bab2d --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/tree-view.less @@ -0,0 +1,13 @@ + +.tree-view-resizer { + border-right: 1px solid @base-border-color; +} + +.tree-view { + color: @text-color; + background-color: @tree-view-background-color; + + .list-item.selected { + color: @text-color-selected; + } +} diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/ui-variables.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/ui-variables.less new file mode 100644 index 0000000..c143815 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/ui-variables.less @@ -0,0 +1,109 @@ + +// Themer colors + +@accent0: #ef4e7c; +@accent1: #f37055; +@accent2: #f79532; +@accent3: #6ebb82; +@accent4: #09b399; +@accent5: #1299ad; +@accent6: #5073b8; +@accent7: #a067ab; + +@shade0: #23292d; +@shade1: #42474b; +@shade2: #616668; +@shade3: #808486; +@shade4: #a0a2a4; +@shade5: #bfc0c2; +@shade6: #dedfdf; +@shade7: #fdfdfd; + +// Base colors + +@base-background-color: @shade0; +@base-border-color: @shade1; + +// Text Colors + +@text-color: @shade6; +@text-color-subtle: @shade3; +@text-color-highlight: @shade7; +@text-color-selected: @shade7; + +@text-color-info: @accent5; +@text-color-success: @accent3; +@text-color-warning: @accent1; +@text-color-error: @accent0; + +// Background colors + +@background-color-info: @accent5; +@background-color-success: @accent3; +@background-color-warning: @accent1; +@background-color-error: @accent0; + +@background-color-highlight: @shade1; +@background-color-selected: @shade2; +@app-background-color: @base-background-color; + +// Component colors + +@pane-item-background-color: @base-background-color; +@pane-item-border-color: @base-border-color; + +@input-background-color: @app-background-color; +@input-border-color: @base-border-color; + +@tool-panel-background-color: @shade1; +@tool-panel-border-color: @base-border-color; + +@inset-panel-background-color: @shade1; +@inset-panel-border-color: @shade2; + +@panel-heading-background-color: @shade1; +@panel-heading-border-color: @base-border-color; + +@overlay-background-color: @shade1; +@overlay-border-color: @base-border-color; + +@button-background-color: @shade2; +@button-background-color-hover: @shade3; +@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: @base-border-color; +@tab-background-color: @tab-bar-background-color; +@tab-background-color-active: @base-border-color; +@tab-border-color: @base-border-color; + +@tree-view-background-color: @base-background-color; +@tree-view-border-color: @base-border-color; + +// Site colors + +@ui-site-color-1: @accent5; +@ui-site-color-2: @accent3; +@ui-site-color-3: @accent1; +@ui-site-color-4: @accent7; +@ui-site-color-5: @accent2; + +// Sizes + +@font-size: 12px; +@input-font-size: 12px; + +@disclosure-arrow-size: 12px; + +@component-padding: 10px; +@component-icon-padding: 5px; +@component-icon-size: 16px; +@component-line-height: 25px; + +@tab-height: 36px; + +// Misc + +@component-border-radius: 2px; +@font-family: '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; |