From 55795515212f488d09c810ec842efab866767d7c Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Tue, 20 Aug 2013 10:47:26 -0700 Subject: [PATCH 1/3] add buttons to ui dark theme --- themes/atom-dark-ui/buttons.less | 30 ++++++++++++++++++++++++++++++ themes/atom-dark-ui/package.cson | 1 + themes/atom-dark-ui/ui-colors.less | 6 +++++- 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 themes/atom-dark-ui/buttons.less diff --git a/themes/atom-dark-ui/buttons.less b/themes/atom-dark-ui/buttons.less new file mode 100644 index 000000000..840d640e4 --- /dev/null +++ b/themes/atom-dark-ui/buttons.less @@ -0,0 +1,30 @@ +@import "ui-colors"; + +.btn-toggle.btn-group { + .btn { + font-weight: bold; + background: @button-color-1; + color: @text-color-3; + font-size: 12px; + padding: 3px; + + border: none; + border-left: 1px solid @border-color-2; + + &:hover{ background: @button-color-hover-1; } + &.enabled{ + color: @accent-color-info-1; + background: @button-color-active-1; + box-shadow: inset 1px 1px 1px @highlight-background-color-1; + } + } + .btn:first-child { + border-left: none; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + } + .btn:last-child { + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; + } +} \ No newline at end of file diff --git a/themes/atom-dark-ui/package.cson b/themes/atom-dark-ui/package.cson index 39fa6870e..4128685b5 100644 --- a/themes/atom-dark-ui/package.cson +++ b/themes/atom-dark-ui/package.cson @@ -12,4 +12,5 @@ 'archive-view' 'collaboration' 'overlay' + 'buttons' ] diff --git a/themes/atom-dark-ui/ui-colors.less b/themes/atom-dark-ui/ui-colors.less index 1f6a9df7d..0f2ad607c 100644 --- a/themes/atom-dark-ui/ui-colors.less +++ b/themes/atom-dark-ui/ui-colors.less @@ -51,4 +51,8 @@ @dark-background-color-1: #1b1c1e; @dark-background-color-2: #19191a; -@text-color-4: #969696; \ No newline at end of file +@text-color-4: #969696; + +@button-color-1: #303030; +@button-color-hover-1: #353536; +@button-color-active-1: #404040; \ No newline at end of file From 7ca2779e56a2febe50c55ca508a0d2254a46bb65 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Tue, 20 Aug 2013 11:13:54 -0700 Subject: [PATCH 2/3] Fix background highlight colors naming --- themes/atom-dark-ui/archive-view.less | 4 ++-- themes/atom-dark-ui/buttons.less | 2 +- themes/atom-dark-ui/command-panel.less | 10 +++++----- themes/atom-dark-ui/select-list.less | 2 +- themes/atom-dark-ui/status-bar.less | 4 ++-- themes/atom-dark-ui/tabs.less | 4 ++-- themes/atom-dark-ui/tree-view.less | 6 +++--- themes/atom-dark-ui/ui-colors.less | 6 +++--- themes/atom-light-ui/ui-colors.less | 6 +++--- 9 files changed, 22 insertions(+), 22 deletions(-) diff --git a/themes/atom-dark-ui/archive-view.less b/themes/atom-dark-ui/archive-view.less index 02ae1769a..d25624227 100644 --- a/themes/atom-dark-ui/archive-view.less +++ b/themes/atom-dark-ui/archive-view.less @@ -10,11 +10,11 @@ } .summary { - background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1); + background-image: -webkit-linear-gradient(@background-color-highlight-2, @background-color-highlight-1); border: 1px solid rgba(0, 0, 0, 0.5); padding: 5px; box-shadow: - inset 0 1px 0 @highlight-background-color-1, + inset 0 1px 0 @background-color-highlight-1, inset 0 -1px 0 rgba(255, 255, 255, 0.02); } } diff --git a/themes/atom-dark-ui/buttons.less b/themes/atom-dark-ui/buttons.less index 840d640e4..da4c9e901 100644 --- a/themes/atom-dark-ui/buttons.less +++ b/themes/atom-dark-ui/buttons.less @@ -15,7 +15,7 @@ &.enabled{ color: @accent-color-info-1; background: @button-color-active-1; - box-shadow: inset 1px 1px 1px @highlight-background-color-1; + box-shadow: inset 1px 1px 1px @background-color-highlight-1; } } .btn:first-child { diff --git a/themes/atom-dark-ui/command-panel.less b/themes/atom-dark-ui/command-panel.less index 1bf64050e..7e43a745e 100644 --- a/themes/atom-dark-ui/command-panel.less +++ b/themes/atom-dark-ui/command-panel.less @@ -5,7 +5,7 @@ background-color: @background-color-2; color: #dedede; border-top: 1px solid rgba(0, 0, 0, 0.5); - box-shadow: inset 0 1px 0 @highlight-background-color-1; + box-shadow: inset 0 1px 0 @background-color-highlight-1; padding: 10px; .btn { @@ -15,11 +15,11 @@ } .command-panel .header { - background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1); + background-image: -webkit-linear-gradient(@background-color-highlight-2, @background-color-highlight-1); border: 1px solid rgba(0, 0, 0, 0.5); padding: 5px; box-shadow: - inset 0 1px 0 @highlight-background-color-1, + inset 0 1px 0 @background-color-highlight-1, inset 0 -1px 0 rgba(255, 255, 255, 0.02); margin-bottom: 0; border-top-right-radius: 3px; @@ -56,12 +56,12 @@ .command-panel .preview-list .path.selected .path-details, .command-panel .preview-list li.operation.selected { - background-color: @highlight-background-color-1; + background-color: @background-color-highlight-1; } .command-panel .preview-list:focus .path.selected .path-details, .command-panel .preview-list:focus li.operation.selected { - background-color: @highlight-background-color-1; + background-color: @background-color-highlight-1; } .command-panel .preview-list .path { diff --git a/themes/atom-dark-ui/select-list.less b/themes/atom-dark-ui/select-list.less index 8f3cfb7a3..704ff98f7 100644 --- a/themes/atom-dark-ui/select-list.less +++ b/themes/atom-dark-ui/select-list.less @@ -40,7 +40,7 @@ } .selected { - background-color: @highlight-background-color-2; + background-color: @background-color-highlight-2; } .right, diff --git a/themes/atom-dark-ui/status-bar.less b/themes/atom-dark-ui/status-bar.less index caae18efb..aa768ddeb 100644 --- a/themes/atom-dark-ui/status-bar.less +++ b/themes/atom-dark-ui/status-bar.less @@ -2,14 +2,14 @@ .status-bar { background-color: @background-color-2; - box-shadow: inset 0 1px 0 @highlight-background-color-1; + box-shadow: inset 0 1px 0 @background-color-highlight-1; border-top: 1px solid rgba(0, 0, 0, 0.8); color: @text-color-4; } .status-bar .grammar-name:hover { color: #fff; - border: 1px solid @highlight-background-color-1; + border: 1px solid @background-color-highlight-1; border-radius: 2px; } diff --git a/themes/atom-dark-ui/tabs.less b/themes/atom-dark-ui/tabs.less index 8e6e4fb8a..37635851a 100644 --- a/themes/atom-dark-ui/tabs.less +++ b/themes/atom-dark-ui/tabs.less @@ -13,8 +13,8 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(0, 0, 0, 1), - inset 1px 0 0 @highlight-background-color-1, - inset -1px 0 0 @highlight-background-color-1; + inset 1px 0 0 @background-color-highlight-1, + inset -1px 0 0 @background-color-highlight-1; color: #b9bdc1; } diff --git a/themes/atom-dark-ui/tree-view.less b/themes/atom-dark-ui/tree-view.less index 542a03728..9da866ebd 100644 --- a/themes/atom-dark-ui/tree-view.less +++ b/themes/atom-dark-ui/tree-view.less @@ -23,12 +23,12 @@ .tree-view .selected > .highlight { background-color: transparent; - background-image: -webkit-linear-gradient(@highlight-background-color-2, fadeout(@highlight-background-color-2, 3%)); + background-image: -webkit-linear-gradient(@background-color-highlight-2, fadeout(@background-color-highlight-2, 3%)); } .tree-view:focus .selected > .highlight { - background-color: @highlight-background-color-3; - background-image: -webkit-linear-gradient(@highlight-background-color-3, fadeout(@highlight-background-color-3, 3%)); + background-color: @background-color-highlight-3; + background-image: -webkit-linear-gradient(@background-color-highlight-3, fadeout(@background-color-highlight-3, 3%)); } .tree-view:focus .directory.selected > .header > .name, diff --git a/themes/atom-dark-ui/ui-colors.less b/themes/atom-dark-ui/ui-colors.less index 0f2ad607c..8bf1ad192 100644 --- a/themes/atom-dark-ui/ui-colors.less +++ b/themes/atom-dark-ui/ui-colors.less @@ -20,9 +20,9 @@ // Main color, darker, lighter. // Supposed to match up with the background color indices -@highlight-background-color-1: rgba(255, 255, 255, 0.05); -@highlight-background-color-2: rgba(255, 255, 255, 0.1); -@highlight-background-color-3: rgba(255, 255, 255, 0.2); +@background-color-highlight-1: rgba(255, 255, 255, 0.05); +@background-color-highlight-2: rgba(255, 255, 255, 0.1); +@background-color-highlight-3: rgba(255, 255, 255, 0.2); // These match up to the background colors as well. @border-color-1: rgba(255, 255, 255, 0.05); diff --git a/themes/atom-light-ui/ui-colors.less b/themes/atom-light-ui/ui-colors.less index e6b15f176..3dc733b1a 100644 --- a/themes/atom-light-ui/ui-colors.less +++ b/themes/atom-light-ui/ui-colors.less @@ -19,9 +19,9 @@ @background-color-3: #f9f9f9; // Highlight color for background corresponding in index to background-color -@background-highlight-color-1: #f9f9f9; -@background-highlight-color-2: #cad5d8; -@background-highlight-color-3: #e2e2e2; +@background-color-highlight-1: #f9f9f9; +@background-color-highlight-2: #cad5d8; +@background-color-highlight-3: #e2e2e2; // Border color for background corresponding in index to background-color. @border-color-1: #ccc; From 4c0ffe122d388e745ade7ee8ba2295ee9b0a396a Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Tue, 20 Aug 2013 11:14:07 -0700 Subject: [PATCH 3/3] Add buttons to the light ui theme --- themes/atom-light-ui/buttons.less | 29 +++++++++++++++++++++++++++++ themes/atom-light-ui/editor.less | 6 +++++- themes/atom-light-ui/package.cson | 1 + themes/atom-light-ui/ui-colors.less | 7 ++++++- 4 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 themes/atom-light-ui/buttons.less diff --git a/themes/atom-light-ui/buttons.less b/themes/atom-light-ui/buttons.less new file mode 100644 index 000000000..98b89eb22 --- /dev/null +++ b/themes/atom-light-ui/buttons.less @@ -0,0 +1,29 @@ +@import "ui-colors"; + +.btn-toggle.btn-group { + .btn { + font-weight: bold; + background: @button-color-1; + color: @text-color-3; + font-size: 12px; + padding: 3px; + + border: none; + border-left: 1px solid @border-color-3; + + &:hover, &.enabled:hover{ background: @button-color-hover-1; } + &.enabled{ + color: @accent-color-info-1; + background: @button-color-active-1; + } + } + .btn:first-child { + border-left: none; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + } + .btn:last-child { + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; + } +} \ No newline at end of file diff --git a/themes/atom-light-ui/editor.less b/themes/atom-light-ui/editor.less index f7b8a16ac..26ce32838 100644 --- a/themes/atom-light-ui/editor.less +++ b/themes/atom-light-ui/editor.less @@ -4,8 +4,12 @@ border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(180, 180, 180, 0.3); border-right: 1px solid rgba(180, 180, 180, 0.3); - background-color: #aaa; + background-color: @background-color-3; color: @text-color-1; + + .cursor { + border-color: #000; + } } .editor.mini .selection .region { diff --git a/themes/atom-light-ui/package.cson b/themes/atom-light-ui/package.cson index 9e3f407e3..078539282 100644 --- a/themes/atom-light-ui/package.cson +++ b/themes/atom-light-ui/package.cson @@ -12,4 +12,5 @@ 'image-view' 'archive-view' 'collaboration' + 'buttons' ] diff --git a/themes/atom-light-ui/ui-colors.less b/themes/atom-light-ui/ui-colors.less index 3dc733b1a..b1fff6672 100644 --- a/themes/atom-light-ui/ui-colors.less +++ b/themes/atom-light-ui/ui-colors.less @@ -26,7 +26,7 @@ // Border color for background corresponding in index to background-color. @border-color-1: #ccc; @border-color-2: #999; -@border-color-3: #ccc; +@border-color-3: rgba(255, 255, 255, .4); // Bright color, darker then lighter. // Info colors are generally blue @@ -45,3 +45,8 @@ @accent-color-success-1: #1fe977; @accent-color-success-2: #17ca65; @accent-color-success-3: #58f79d; + +// Colors that are not standard for themes. +@button-color-1: rgba(0,0,0,.15); +@button-color-hover-1: rgba(0,0,0,.2); +@button-color-active-1: rgba(0,0,0,.1); \ No newline at end of file