Merge pull request #8462 from adobe/dangoor/8420-theme-rejigger

larz0 · larz0 · commit 56f70a49d30f · 2014-07-21T12:21:52.000-07:00
Redoing the dark theme to be more plain CSS and not rely on central variables
diff --git a/src/extensions/default/ThorDarkTheme/main.less b/src/extensions/default/ThorDarkTheme/main.less
@@ -1,4 +1,4 @@
-// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a
 // copy of this software and associated documentation files (the "Software"),
@@ -23,16 +23,16 @@
 
 
 // Brackets-specific default font and color definitions
-@import url("brackets_colors.less");
+//@import url("brackets_colors.less");
 
 // Default theme -- all UI styling comes from variables in a theme
 // Themes can rely on variables defined above
-@import url("brackets_theme_default.less");
+//@import url("brackets_theme_default.less");
 
 // Include Codemirror styling overrides so that we can overrides proper values
 // for the theme.  If you need to customize the tree, you also include jsTree.less
 // and even brackets_scrollbars.less
-@import url("brackets_codemirror_override.less");
+//@import url("brackets_codemirror_override.less");
 
 
 /*
@@ -48,147 +48,115 @@
  * in this file.
  */
 
-/* Overall Colors */
+/* Define some variables used in multiple places */
 @background: #1d1f21;
-@current-line: #000;
 @foreground: #c5c8c6;
-@comment: #767676;
-@orange: #d89333;
-@blue: #6c9ef8;
-@purple: #b77fdb;
-@green: #85a300;
-@red: #dc322f;
-@aqua: #8abeb7;
-@violet: #6c71c4;
-@yellow: #f0c674;
-@pink: #d85896;
+@bc-color-step-size: 10%;
 
-/*
- * Background colors are ordered from least "intense" to most "intense"
- * So, if the background is light, then @background-color-3 should be
- * lightest, -2 should be darker, and -1 should be darker still.
- *
- * The opposite is true for a dark background -- background-color-3 should be
- * the darkest, -2 should be lighter, and -1 should be lighter still.
- */
-@background-color-1: lighten(@background, @bc-color-step-size*2);
-@background-color-2: lighten(@background, @bc-color-step-size);
-@background-color-3: @background;
+/* Code Styling */
 
-/*
- * @content-color-stronger should be should be further away from the
- * background color than @content-color (i.e. more contrasty).
- *
- * @content-color-weaker should be closer to the background color
- * than @content-color (i.e. less contrasty).
- */
-@content-color: @foreground;
-@content-color-stronger: lighten(@foreground, @bc-color-step-size);
-@content-color-weaker: darken(@foreground, @bc-color-step-size);
+/* Custom scrollbar colors */
+.platform-win & {
+    .CodeMirror-gutter-filler {
+        background-color: rgb(15, 15, 15);
+    }
+    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
 
-/* Code Styling */
+    ::-webkit-scrollbar {
+        background-color: rgb(15, 15, 15);
+    }
 
-/* code accent colors */
-@accent-keyword: @blue;
-@accent-atom: @orange;
-@accent-number: @green;
-@accent-def: @purple;
-@accent-variable: @foreground;
-@accent-variable-2: @foreground;
-@accent-variable-3: @foreground;
-@accent-property: @purple;
-@accent-operator: @foreground;
-@accent-comment: @comment;
-@accent-string: @orange;
-@accent-string-2: @orange;
-@accent-meta: @foreground;
-@accent-error: @red;
-@accent-qualifier: @blue;
-@accent-builtin: @blue;
-@accent-bracket: @foreground;
-@accent-tag: @blue;
-@accent-attribute: @green;
-@accent-header: @pink;
-@accent-quote: @blue;
-@accent-hr: @orange;
-@accent-link: @purple;
-@accent-rangeinfo: @violet;
-@accent-minus: @red;
-@accent-plus: @green;
-
-/* inline editor colors */
-@inline-background-color-1: lighten(@background, @bc-color-step-size);
-@inline-background-color-2: lighten(@background, @bc-color-step-size*2);
-@inline-background-color-3: rgba(0,0,0,0);
-
-@inline-color-1: darken(@foreground, @bc-color-step-size*2);
-@inline-color-2: darken(@foreground, @bc-color-step-size);
-@inline-color-3: @background;
-
-/* Selection colors */
-@selection-color-focused: #0050a0;
-@selection-color-unfocused: #333f48;
-
-@activeline-bgcolor: #2f2f2f;
-@activeline-number: #fff;
-@activeline-number-bgcolor: #000;
-@matching-bracket: #2e5c00;
-
-/* Status Bar Colors */
-@status-bar-background-color: #1C1C1E;
-@status-bar-border: rgba(255, 255, 255, 0.08);
-@status-bar-text-color: #a1a1a1;
-@status-bar-quiet-text-color: #666;
-
-/* custom scrollbar colors */
-@win-scrollbar-track: rgb(15, 15, 15);
-@win-scrollbar-thumb: rgb(49, 49, 49);
-@win-scrollbar-thumb-hover: rgb(89, 89, 89);
-@win-scrollbar-thumb-active: rgb(169, 169, 169);
-
-@linux-scrollbar-thumb: rgba(255, 255, 255, 0.24);
-@linux-scrollbar-thumb-inactive: rgba(255, 255, 255, 0.12);
+    ::-webkit-scrollbar-thumb {
+        box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
+    }
+    ::-webkit-scrollbar-thumb:hover,
+    ::-webkit-scrollbar-thumb:focus {
+        box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
+    }
+    ::-webkit-scrollbar-thumb:active {
+        box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
+    }
+}
 
+.platform-linux & {
+    ::-webkit-scrollbar-thumb {
+        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
+    }
 
-/* Extra CSS */
+    ::-webkit-scrollbar-thumb:window-inactive {
+        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
+    }
+}
 
-.code-cursor() {
-    // to make a block cursor, use something like this:
-    // background-color: fadeout(@blue, 50%);
-    // border: none !important;
 
-    // to make an I-cursor, use something like this:
-    border-left: 1px solid @content-color !important;
+.CodeMirror, .CodeMirror-scroll {
+    background-color: @background;
+    color: @foreground;
 }
 
-.CodeMirror .CodeMirror-gutters {
-    // gutter border:
-    // border-right: 1px solid rgba(255, 255, 255, 0.03);
+.CodeMirror-focused .CodeMirror-activeline-background {
+    background: #2f2f2f;
+}
+.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
+    box-shadow: inset 15px 0 0 0 #000;
 }
 
-.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
-    color: @comment;
+.CodeMirror-focused .CodeMirror-activeline {
+    .CodeMirror-gutter-elt {
+        background: #000;
+        color: #fff;
+    }
+    .inline-widget .CodeMirror-gutter-elt {
+        color: #767676;    
+    }
 }
 
-#status-bar {
-    background: @status-bar-background-color;
-    border-top: 1px solid @status-bar-border;
-    color:@status-bar-text-color;
+.cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #6c9ef8;}
+.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #d89333;}
+.cm-number, .cm-attribute, .cm-plus {color: #85a300;}
+.cm-def, .cm-property {color: #b77fdb;}
+.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
+.cm-comment {color: #767676;}
+.cm-error, .cm-minus {color: #dc322f;}
+.cm-header {color: #d85896;}
+.cm-link {color: #b77fdb; text-decoration: none;}
+.cm-rangeinfo {color: #6c71c4;}
+
+/* Extra CSS */
+
+.CodeMirror-cursor {
+    border-left: 1px solid #c5c8c6 !important;
 }
 
-#status-info {
-    color: @status-bar-text-color;
+.CodeMirror-gutters {
+    background-color: @background;
+    border-right: none;
 }
 
-#status-file {
-    color: @status-bar-quiet-text-color;
+.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
+    color: #767676;
 }
 
-#status-indicators {
-    background: @status-bar-background-color;
-    color: @status-bar-text-color;
+.CodeMirror .CodeMirror-selected {
+    background: #333f48;
+}
+.CodeMirror-focused .CodeMirror-selected {
+    background: #0050a0;
+}
 
-    > div {
-        border-left: 1px solid @status-bar-border;
-    }
+.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
+    /* Ensure visibility against gray inline editor background */
+    background-color: #2e5c00;
+    color: @foreground !important;
 }
+
+/* Inline editor styling */
+
+.related-container .selection:before {
+    border-top: 9px solid black;
+    border-bottom: 9px solid black;
+}
+
+.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
+    background: transparent;
+}
diff --git a/src/extensions/default/ThorLightTheme/main.less b/src/extensions/default/ThorLightTheme/main.less
@@ -18,27 +18,4 @@
 // FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 // DEALINGS IN THE SOFTWARE.
 
-// Brackets-specific default font and color definitions
-@import url("brackets_colors.less");
-
-// Default theme -- all UI styling comes from variables in a theme
-// Themes can rely on variables defined above
-@import url("brackets_theme_default.less");
-
-// Include Codemirror styling overrides so that we can overrides proper values
-// for the theme.  If you need to customize the tree, you also include jsTree.less
-// and even brackets_scrollbars.less
-@import url("brackets_codemirror_override.less");
-
-/*
- * Brackets Default Theme
- *
- * Defines all the variables that one can configure in a theme. This should
- * contain all variables / mixins for UI styling that we want to be able to
- * change in a theme.
- *
- * Throughout the rest of the LESS files we should _only_ use color
- * variable names that are on the LHS of the list below. So, if we
- * need a new color for some UI element, we should add a variable
- * in this file.
- */
+// This is the default theme and doesn't need to do anything!
