Merge pull request #8529 from adobe/dangoor/inline-styling

Dark UI theme for inline editors

Author: redmunds

src/extensions/default/DarkTheme/main.less

@@ -50,7 +50,7 @@
 
 /* Define some variables used in multiple places */
 @background: #1d1f21;
-@foreground: #c5c8c6;
+@foreground: #ddd;
 @bc-color-step-size: 10%;
 
 /* Code Styling */
@@ -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 {
@@ -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;
+}

src/extensions/default/DarkTheme/package.json

@@ -1,5 +1,5 @@
 {
-    "title": "Dark",
+    "title": "Brackets Dark",
     "name": "dark-theme",
     "description": "Built-in dark theme for Brackets",
     "version": "0.42.0",

src/extensions/default/InlineColorEditor/css/main.css renamed to src/extensions/default/InlineColorEditor/css/main.less

@@ -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%;
@@ -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 {
@@ -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;
@@ -327,4 +329,126 @@
 
 .color-editor .platform-mac .CodeMirror {
     font-family: "SourceSansPro" !important;
+}
+
+// Dark UI theme
+
+@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;
+@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;
+    }
+}
+
+@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;
+        }
+    }
 }

src/extensions/default/InlineColorEditor/img/color_thumb_back_dark.png

@@ -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);
 

src/extensions/default/InlineColorEditor/img/color_thumb_back_dark@2x.png

@@ -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
             };
 

src/extensions/default/InlineColorEditor/main.js

@@ -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,

src/extensions/default/InlineTimingFunctionEditor/BezierCurveEditor.js

@@ -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);