Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Dark UI theme for inline editors #8529

Merged
merged 20 commits into from
Jul 25, 2014
Merged

Dark UI theme for inline editors #8529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
411368b
Dark inline text editor styling
dangoor Jul 23, 2014
ab81de0
Dark inline color editor
dangoor Jul 23, 2014
26b2226
Add retina swatch
dangoor Jul 23, 2014
f3e2a74
Not quite done inline timing editor dark theme
dangoor Jul 23, 2014
86648b4
InlineTimingFunctionEditor styling
dangoor Jul 23, 2014
6bac834
Initial QuickDocs dark styling
dangoor Jul 23, 2014
955f42e
Fix up the inline timing function styling.
dangoor Jul 24, 2014
70869d8
Style dark inline widget buttons appropriately
dangoor Jul 24, 2014
3ed432f
Quick Doc dark styles are now in scope.
larz0 Jul 24, 2014
b7bae84
Inline color editor fixes.
larz0 Jul 24, 2014
afc9f48
Active line number should stand out.
larz0 Jul 24, 2014
60c921f
fix #8541
JeffryBooher Jul 24, 2014
53bc3bf
Tweaked inline timing editors.
larz0 Jul 24, 2014
545b7c9
Made blank view dark. Renamed themes so Brackets Light and Brackets D…
larz0 Jul 24, 2014
3f93a54
Merge branch 'jeff/inline-styling' into dangoor/inline-styling
dangoor Jul 25, 2014
a21df20
Inline Timing Function Editor tweaks based on @SAPlayer's feedback.
larz0 Jul 25, 2014
4e4303d
Included color correction for bezier-curve-editor as well.
larz0 Jul 25, 2014
8129d6c
Dark Image Viewer styling added.
larz0 Jul 25, 2014
93d4674
Updated copyright.
larz0 Jul 25, 2014
80c5180
Constrain dark scrollbars to the `#editor-holder`
dangoor Jul 25, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/extensions/default/DarkTheme/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

/* Define some variables used in multiple places */
@background: #1d1f21;
@foreground: #c5c8c6;
@foreground: #ddd;
@bc-color-step-size: 10%;

/* Code Styling */
Expand Down Expand Up @@ -104,8 +104,8 @@
border-right: none;
}

.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
color: #767676;
.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
color: #fff;
}

.CodeMirror .CodeMirror-selected {
Expand Down Expand Up @@ -136,3 +136,14 @@
.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
background: transparent;
}

/* Non-editor styling */

#image-holder,
#not-editor {
background-color: @background;
}

#image-holder {
color: @foreground;
}
2 changes: 1 addition & 1 deletion src/extensions/default/DarkTheme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "Dark",
"title": "Brackets Dark",
"name": "dark-theme",
"description": "Built-in dark theme for Brackets",
"version": "0.42.0",
Expand Down
130 changes: 127 additions & 3 deletions ...ns/default/InlineColorEditor/css/main.css → ...s/default/InlineColorEditor/css/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,10 @@
width: 88px;
margin-right: 9px;
display: inline-block;
box-shadow: 0 1px 0 #fff;
position: relative;
overflow: hidden;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.color-editor aside header .large-swatch {
width: 50%;
Expand Down Expand Up @@ -120,7 +122,6 @@
width: 100%;
height: 100%;
border-radius: 3px;
border-bottom: 1px solid #fff;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.color-editor section .color-selection-field {
Expand Down Expand Up @@ -315,9 +316,10 @@
border-bottom-right-radius: 3px;
}
.color-editor .button-bar li.selected a {
background-color: #d3d7d7;
background-color: #e0f0fa;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
background-image: none;
color: #0083e8;
}
.color-editor .button-bar li.disabled a {
cursor: default;
Expand All @@ -327,4 +329,126 @@

.color-editor .platform-mac .CodeMirror {
font-family: "SourceSansPro" !important;
}

// Dark UI theme
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Dark Theme changes the color (tone?) of the transparent white/gray checkerboard. I think this should be the same regardless of Theme.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about keeping the light grid but they pop out too much on a dark background and it's hard to see transparent colors that way because the brightness grabs all the attention.


@dark-bc-bg-highlight: #1671db;
@dark-bc-highlight: rgba(255, 255, 255, 0.06);
@dark-bc-text: #ddd;
@dark-bc-text-alt: #fff;
@dark-bc-highlight-hard: rgba(255, 255, 255, 0.1);
@dark-bc-btn-bg: #3f3f3f;
@dark-bc-btn-border: #202020;
@dark-bc-btn-border-focused: #2893ef;
@dark-bc-btn-border-focused-glow: transparent;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to have a non-transparent color to show the focus ring.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dark theme doesn't use glow on purpose because the focus border is already very bright compared to the light theme.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then you can't tell where the focus is as you tab through the UI.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you mean now. It's fixed: http://cl.ly/image/2K1Z0V0j2220

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. That's what I want.

@dark-bc-shadow: rgba(0, 0, 0, 0.24);
@dark-bc-shadow-small: rgba(0, 0, 0, 0.06);
@dark-bc-shadow-medium: rgba(0, 0, 0, 0.12);
@dark-bc-input-bg: #555;

@dark-swatch-bg: url("../img/color_thumb_back_dark.png");
@dark-swatch-bg-2x: url("../img/color_thumb_back_dark@2x.png");

.dark {
.color-editor aside header .large-swatches,
.color-editor aside ul.swatches li .swatch-bg,
.color-editor section .slider.opacity-slider {
background-image: @dark-swatch-bg;
}

.color-editor ul.swatches li .value {
color: @dark-bc-text;
}

.color-editor section .gradient-overlay {
box-shadow: 0 1px 0 @dark-bc-highlight, inset 0 1px 0 @dark-bc-shadow-medium;
}

.color-editor aside ul.swatches li .swatch-bg .swatch {
box-shadow: 0 -1px 1px @dark-bc-shadow-small;
}

.color-editor aside ul.swatches li:focus {
outline: 1px solid @dark-bc-btn-border-focused;
box-shadow: 0 0 0 1px @dark-bc-btn-border-focused-glow;
}

.color-editor section .color-selection-field .selector-base {
color: @dark-bc-input-bg;
}

.color-editor section .color-selection-field .selector-base:focus {
box-shadow: 0 0 0 5px @dark-bc-btn-border-focused-glow;
}

.color-editor section .slider {
border-bottom: 1px solid @dark-bc-highlight-hard;
box-shadow: 0 -1px 0 @dark-bc-shadow-small;
background-color: @dark-bc-highlight-hard;
box-shadow: 0 1px 0 @dark-bc-highlight-hard, inset 0 1px 0 @dark-bc-shadow;
}

.color-editor section .slider .selector-base:focus {
box-shadow: 0 0 0 5px @dark-bc-btn-border-focused-glow;
}

.color-editor section footer .color-value {
border-color: @dark-bc-btn-border;
color: @dark-bc-text;
}

.color-editor section footer input {
border: 1px solid @dark-bc-btn-border;
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
background: @dark-bc-input-bg;
color: @dark-bc-text;
}

.color-editor section footer input:focus {
background: @dark-bc-input-bg;
box-shadow: 0 0 0 1px @dark-bc-btn-border-focused-glow;
border: 1px solid @dark-bc-btn-border-focused;
}

.color-editor .button-bar a {
color: @dark-bc-text;
text-shadow: 0 1px 0 @dark-bc-highlight;
background-color: @dark-bc-btn-bg;
border: 1px solid @dark-bc-btn-border;
border-right: 1px solid transparent;
box-shadow: inset 0 1px 0 @dark-bc-highlight;
}

.color-editor .button-bar a:focus, .color-editor .button-bar li.selected a:focus {
border: 1px solid @dark-bc-btn-border-focused;
border-right: 1px solid @dark-bc-btn-border-focused !important; /* we need this !important, sorry! */
box-shadow: 0 0 0 1px @dark-bc-btn-border-focused-glow;
}

.color-editor .button-bar li:last-child a {
border-right: 1px solid @dark-bc-btn-border;
}

.color-editor .button-bar li.selected a {
background-color: @dark-bc-bg-highlight;
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
color: @dark-bc-text-alt;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the Light Theme, I never noticed this before, but in the radio buttons (RGBa|Hex|HSLa) the selected state looks unselected -- so it looks like 2 selected buttons and 1 unselected button. It's not as noticeable when control has focus because selected button has glow outline, so click on another control and look at unfocused state.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The selected state should be light blue like find options. I've fixed this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@larz0 In light theme, the selected state of text is now light blue, but I was expecting the background to be blue similar to dark theme. Is that intended?

}

@media all and (-webkit-min-device-pixel-ratio : 2), (min-device-pixel-ratio : 2) {
.dark {
.color-editor aside header .large-swatches {
background-image: @dark-swatch-bg-2x;
}

.color-editor aside ul.swatches li .swatch-bg {
background-image: @dark-swatch-bg-2x;
}

.color-editor section .slider.opacity-slider {
background-image: @dark-swatch-bg-2x;
}
}
}
Binary file added src/extensions/default/InlineColorEditor/img/color_thumb_back_dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/extensions/default/InlineColorEditor/img/color_thumb_back_dark@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/extensions/default/InlineColorEditor/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ define(function (require, exports, module) {


// Initialize extension
ExtensionUtils.loadStyleSheet(module, "css/main.css");
ExtensionUtils.loadStyleSheet(module, "css/main.less");

EditorManager.registerInlineEditProvider(inlineColorEditorProvider);

Expand Down
4 changes: 2 additions & 2 deletions src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,11 +160,11 @@ define(function (require, exports, module) {
setting;

var defaultSettings = {
handleTimingFunction: "#1461FC",
handleTimingFunction: "#2893ef",
handleThickness: 0.008,
vBorderThickness: 0.02,
hBorderThickness: 0.01,
bezierTimingFunction: "#1461FC",
bezierTimingFunction: "#2893ef",
bezierThickness: 0.03
};

Expand Down
4 changes: 2 additions & 2 deletions src/extensions/default/InlineTimingFunctionEditor/StepEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,9 @@ define(function (require, exports, module) {
p = [];

var defaultSettings = {
bgColor: "#fff",
bgColor: "transparent",
borderColor: "#bbb",
stepColor: "#1461fc",
stepColor: "#2893ef",
dashColor: "#b8b8b8",
borderWidth: 0.00667,
stepLineWidth: 0.02,
Expand Down
Binary file added src/extensions/default/InlineTimingFunctionEditor/grid-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/extensions/default/InlineTimingFunctionEditor/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ define(function (require, exports, module) {
*/
function init() {
// Load our stylesheet
ExtensionUtils.loadStyleSheet(module, "main.css");
ExtensionUtils.loadStyleSheet(module, "main.less");
ExtensionUtils.addEmbeddedStyleSheet(Mustache.render(Localized, Strings));

EditorManager.registerInlineEditProvider(inlineTimingFunctionEditorProvider);
Expand Down
Loading