rnhmjoj/solarized-dark-ui
1
0
Fork 0
mirror of https://github.com/Rnhmjoj/solarized-dark-ui synced 2025-01-10 09:24:21 +01:00
Code Issues Releases Wiki Activity

First pass at color updates

Browse Source
This commit is contained in:
Rob Cameron 2014-02-26 15:30:56 -08:00
parent d23da2adbd
commit bc94406ec3
10 changed files with 57 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,9 +1,3 @@
# Atom Dark UI theme
# Spacegray Dark UI theme
Default dark UI theme for Atom.
This theme is installed by default with Atom and can be activated by going to
the _Themes_ section in the Settings view (`cmd-,`) and selecting it from the
_UI Themes_ drop-down menu.
![](https://f.cloud.github.com/assets/671378/2265086/c6897dba-9e7b-11e3-945d-551cac610717.png)
Port of the [Spacegray](http://kkga.github.io/spacegray) Sublime Text theme to Atom.

10
package.json
View File

@ -1,11 +1,11 @@
{
"name": "atom-dark-ui",
"name": "spacegray-dark-ui",
"theme": "ui",
"version": "0.23.0",
"description": "Default dark theme for interface components",
"version": "0.0.0",
"description": "Port of the Spacegray Sublime Text theme http://kkga.github.io/spacegray to Atom",
"license": "MIT",
"repository": "https://github.com/atom/atom-dark-ui",
"repository": "https://github.com/cannikin/spacegray-dark-ui",
"engines": {
"atom": ">0.40.0"
"atom": ">0.50.0"
}
}

8
stylesheets/buttons.less
View File

@ -4,18 +4,18 @@
.btn-background (@color, @hover-color, @selected-color, @text-color) {
color: @text-color;
background-color: transparent;
background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
&: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%));
}
}
}

24
stylesheets/editor.less
View File

@ -4,9 +4,6 @@
.editor.mini {
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;
@ -14,14 +11,23 @@
.selection .region { background-color: lighten(@input-background-color, 10%); }
}
.editor.editor-colors.mini.is-focused {
background-color: lighten(@input-background-color, 5%);
.selection .region { background-color: desaturate(@background-color-info, 50%); }
.editor {
background-color: @editor-background-color;
}
.editor .gutter {
background-color: @editor-background-color;
}
.editor.mini {
background-color: @editor-background-color;
.placeholder-text {
color: @text-color-subtle;
}
}
// FIXME: these should go in syntax themes?
.editor .gutter.drop-shadow {
-webkit-box-shadow: -2px 0 10px 2px #222;
.editor.editor-colors.mini.is-focused {
background-color: darken(@editor-background-color, 3%);
.selection .region { background-color: desaturate(@background-color-info, 50%); }
transition: background-color 0.1s
}
@-webkit-keyframes highlight {

4
stylesheets/lists.less
View File

@ -87,7 +87,6 @@
.select-list.popover-list {
background-color: @overlay-background-color;
box-shadow: 0 0 10px @base-border-color;
padding: @component-padding/2;
border-radius: @component-border-radius;
border: 1px solid @overlay-border-color;
@ -120,6 +119,5 @@ li.ui-draggable-dragging, li.ui-sortable-helper {
border-radius: 0;
list-style: none;
padding: 0 @component-padding;
background: @background-color-highlight;
box-shadow: 0 0 1px @base-border-color;
background: @background-color-highlight;;
}

1
stylesheets/overlays.less
View File

@ -5,7 +5,6 @@
background-color: @overlay-background-color;
padding: @component-padding;
border: 1px solid @overlay-border-color;
box-shadow: 0 0 10px @base-border-color;
border-radius: @component-border-radius;
.editor.mini {

12
stylesheets/panels.less
View File

@ -14,15 +14,6 @@
position: relative;
background-color: @tool-panel-background-color;
&.panel-bottom {
border-top: 1px solid @tool-panel-border-color;
box-shadow: inset 0 1px 0 @background-color-highlight;
}
&.panel-left {
border-right: 1px solid @tool-panel-border-color;
}
}
.inset-panel {
@ -39,9 +30,6 @@
.panel-heading {
.text(normal);
border-bottom: 1px solid @panel-heading-border-color;
border-top: 1px solid fadein(@background-color-highlight, 10%);
background-color: transparent;
background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));

34
stylesheets/tabs.less
View File

@ -2,15 +2,14 @@
@tab-radius: 3px;
@modified-icon-width: 8px;
@tab-skew: 30deg;
@tab-top-padding: 5px;
@tab-top-padding: 0;
@tab-bottom-border-height: 8px;
@tab-border: 1px solid @tab-border-color;
@tab-bar-bottom-border-color: #111;
.tab-bar {
height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
height: @tab-height + @tab-top-padding;
background: @tab-bar-background-color;
box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15);
padding: 0 13px 0 10px;
box-sizing: border-box;
@ -21,9 +20,6 @@
height: @tab-bottom-border-height;
left: 0px;
width: 100%;
background-color: @tab-background-color-active;
border-top: 1px solid @tab-border-color;
border-bottom: 1px solid @tab-bar-bottom-border-color;
}
.tab {
@ -34,16 +30,7 @@
color: @text-color;
padding-left: 0;
margin-left: 15px;
border-top-right-radius: @tab-radius;
box-shadow: inset -1px -1px 1px rgba(0,0,0, .05);
-webkit-transform: skewX(@tab-skew);
transition: color .1s ease-in;
box-shadow: inset -1px 1px 0 @tab-border-color, 4px 0px 4px rgba(0,0,0,.1);
border: none;
&, &:before {
background-image: -webkit-linear-gradient(top, lighten(#333, 7%), #333);
}
&:before {
content: '';
@ -52,16 +39,11 @@
left: -18px;
height: @tab-height;
width: 40px;
border-top-left-radius: @tab-radius;
-webkit-transform: skewX(133deg);
box-shadow: inset 1px 1px 0 @tab-border-color, -4px 0px 4px rgba(0,0,0,.1);
border: none;
}
.close-icon {
z-index: 3;
line-height: @tab-height;
-webkit-transform: skewX(-@tab-skew);
}
&.modified:not(:hover) .close-icon {
top: @tab-height/2 - @modified-icon-width/2 + 1px;
@ -70,10 +52,6 @@
height: @modified-icon-width;
}
.title{
-webkit-transform: skewX(-@tab-skew);
}
&:first-child {
margin-left: 20px;
}
@ -83,8 +61,6 @@
z-index: 10;
line-height: @tab-height - 3px;
color: @text-color-highlight;
box-shadow: inset -1px 1px 0 @tab-border-color, 4px -4px 4px rgba(0,0,0,.1);
border: none;
.title{
position: relative;
@ -96,14 +72,10 @@
}
&, &:before {
background-image: -webkit-linear-gradient(top, lighten(@tab-background-color-active, 7%), @tab-background-color-active);
background-color: @tab-background-color-active;
height: @tab-height + 1px;
}
&:before {
border: none;
box-shadow: inset 1px 1px 0 @tab-border-color, -4px -4px 4px rgba(0,0,0,.1);
}
}
.tab:hover {

15
stylesheets/tree-view.less
View File

@ -2,26 +2,13 @@
.tree-view {
font-size: @font-size;
background: @tree-view-background-color;
.selected:before {
background: #444;
box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
}
background-color: @tree-background-color;
}
.focusable-panel {
opacity: 1;
background: #303030;
box-shadow: inset -3px 0 0 rgba(0,0,0, .05);
&:focus {
background: #282828;
.selected:before {
background: @background-color-selected;
}
.selected > .name,
.selected > .name:before,
.selected > .list-item > .name,

49
stylesheets/ui-variables.less
View File

@ -1,14 +1,14 @@
// Colors
@text-color: #aaa;
@text-color-subtle: #555;
@text-color-highlight: #fff;
@text-color-selected: @text-color-highlight;
@text-color: rgb(101, 115, 127);
@text-color-subtle: #484F5A;
@text-color-highlight: rgb(192,197,206);
@text-color-selected: rgb(223, 225, 232);
@text-color-info: #5293d8;
@text-color-success: #26c26a;
@text-color-warning: #ff982d;
@text-color-error: #c00;
@text-color-info: #5786B8;
@text-color-success: #68A281;
@text-color-warning: #AA8A69;
@text-color-error: #9B4444;
@text-color-ignored: @text-color-subtle;
@text-color-added: @text-color-success;
@ -21,9 +21,12 @@
@background-color-warning: #ffaa2c;
@background-color-error: #c00;
@background-color-highlight: rgba(255, 255, 255, 0.07);
@background-color-selected: #4182C4;
@background-color-selected: #343D46;
@app-background-color: #333;
@editor-background-color: #2B303B;
@tree-background-color: #232830;
@app-background-color: #232830;
@base-background-color: lighten(@tool-panel-background-color, 5%);
@base-border-color: rgba(0, 0, 0, 0.5);
@ -31,11 +34,11 @@
@pane-item-background-color: @base-background-color;
@pane-item-border-color: rgba(0, 0, 0, 0.5);
@input-background-color: #212224;
@input-background-color: #1C1F26;
@input-border-color: @base-border-color;
@tool-panel-background-color: #1d1f21;
@tool-panel-border-color: @base-border-color;
@tool-panel-background-color: #1C1F26;
@tool-panel-border-color: transparent;
@inset-panel-background-color: #161719;
@inset-panel-border-color: @base-border-color;
@ -46,16 +49,16 @@
@overlay-background-color: #202123;
@overlay-border-color: @background-color-highlight;
@button-background-color: #43484d;
@button-background-color-hover: lighten(@button-background-color, 5%);
@button-background-color-selected: #5c6064;
@button-border-color: @base-border-color;
@button-background-color: #1C1F26;
@button-background-color-hover: #1C1F26;
@button-background-color-selected: #1C1F26;
@button-border-color: transparent;
@tab-bar-background-color: #222;
@tab-bar-border-color: darken(@tab-background-color-active, 10%);
@tab-background-color: #333;
@tab-background-color-active: #222;
@tab-border-color: #484848;
@tab-bar-background-color: rgb(28, 31, 38);
@tab-bar-border-color: transparent;
@tab-background-color: #1C1F26;
@tab-background-color-active: rgb(43, 48, 59);
@tab-border-color: transparent;
@tree-view-background-color: @tool-panel-background-color;
@tree-view-border-color: @tool-panel-border-color;
@ -69,7 +72,7 @@
// Sizes
@font-size: 13px;
@font-size: 11px;
@disclosure-arrow-size: 12px;