Start applying new style-guide css to csjs

src/app.js

@@ -48,7 +48,7 @@ var css = csjs`
     margin             : 0;
     padding            : 0;
     font-size          : 12px;
-    color              : ${styles.colors.black};
+    color              : ${styles.leftPanel.text_Primary};
     font-weight        : normal;
   }
   pre {
@@ -61,7 +61,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .centerpanel         {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.colors.transparent};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -70,7 +70,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .leftpanel           {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -80,7 +80,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .rightpanel          {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.rightPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -92,12 +92,12 @@ var css = csjs`
   .highlightcode {
     position:absolute;
     z-index:20;
-    background-color: ${styles.colors.lightOrange};
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
   }
   .highlightcode_fullLine {
     position:absolute;
     z-index:20;
-    background-color: ${styles.colors.lightOrange};
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
     opacity: 0.5;
   }
 `

src/app/editor/editor.js

@@ -8,11 +8,14 @@ var Range = ace.acequire('ace/range').Range
 require('brace/ext/language_tools')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .ace-editor {
-    background-color  : ${styles.colors.general_BackgroundColor};
-    border-top: 20px solid ${styles.colors.backgroundBlue};
+    background-color  : ${styles.editor.backgroundColor_Editor};
+    border-top: 20px solid ${styles.editor.backgroundColor_Tabs_Highlights};
     width     : 100%;
   }
 `
@@ -21,10 +24,10 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter,
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
-        background-color: rgba(225, 229, 251, 0.5);
-    }  
+        background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+    }
     .ace_gutter-cell.ace_breakpoint{
-      background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+      background-color: ${styles.editor.backgroundColor_DebuggerMode};
     }
     .highlightreference {
       position:absolute;
@@ -44,7 +47,7 @@ document.head.appendChild(yo`
       position:absolute;
       z-index:20;
       background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-    }
+     }    
   </style>
 `)
 

src/app/files/file-explorer.js

@@ -24,10 +24,10 @@ var css = csjs`
     cursor            : pointer;
   }
   .hasFocus           {
-    background-color  : ${styles.colors.backgroundBlue};
+    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
   }
   .rename             {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
   }
   .remove             {
     margin-left       : auto;
@@ -186,7 +186,7 @@ function fileExplorer (appAPI, files) {
       this.style.paddingRight = '19px'
       return this.removeChild(deleteButton)
     }
-    this.style.backgroundColor = styles.colors.backgroundBlue
+    this.style.backgroundColor = styles.leftPanel.backgroundColor_FileExplorer
     this.style.paddingRight = '0px'
     this.appendChild(deleteButton)
   }

src/app/panels/editor-panel.js

@@ -7,6 +7,49 @@ var styles = styleGuide()
 
 var Terminal = require('./terminal')
 
+var cssTabs = yo`
+  <style>
+    #files .file {
+      padding: 0 0.6em;
+      box-sizing: border-box;
+      background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+      cursor: pointer;
+      margin-right: 10px;
+      margin-top: 5px;
+      position: relative;
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      color: ${styles.editor.text_Secondary};
+    }
+    #files .file.active {
+      color: ${styles.editor.text_Primary};
+      font-weight: bold;
+      border-bottom: 0 none;
+      padding-right: 1.5em;
+    }
+    #files .file .remove {
+      font-size: 12px;
+      display: flex;
+      color: ${styles.editor.text_Primary};
+      position: absolute;
+      top: -7px;
+      right: 5px;
+      display: none;
+    }
+    #files .file input {
+      background-color: ${styles.colors.transparent};
+      border: 0 none;
+      border-bottom: 1px dotted ${styles.editor.text_Primary};
+      line-height: 1em;
+      margin: 0.5em 0;
+    }
+    #files .file.active .remove {
+      display: inline-block;
+    }
+  </style>
+`
+
 var css = csjs`
   .editorpanel         {
     display            : flex;
@@ -14,10 +57,10 @@ var css = csjs`
     height             : 100%;
   }
   .tabsbar             {
+    background-color   : ${styles.editor.backgroundColor_Panel};
     display            : flex;
     overflow           : hidden;
-    height             : 2em;
-    margin-top         : 0.5em;
+    height             : 30px;
   }
   .tabs               {
     position          : relative;
@@ -29,6 +72,7 @@ var css = csjs`
     overflow          : hidden;
   }
   .files              {
+    display           : flex;
     position          : relative;
     list-style        : none;
     margin            : 0;
@@ -67,7 +111,7 @@ var css = csjs`
     padding           : 10px;
     width             : 100%;
     font-weight       : bold;
-    color             : ${styles.colors.black};
+    color             : ${styles.leftPanel.icon_Color_TogglePanel};
   }
   .toggleLHP i        {
     cursor            : pointer;
@@ -75,7 +119,7 @@ var css = csjs`
     font-weight       : bold;
   }
   .toggleLHP i:hover  {
-    color             : ${styles.colors.orange};
+    color             : ${styles.leftPanel.icon_HoverColor_TogglePanel};
   }
   .scroller           {
     position          : absolute;
@@ -96,7 +140,7 @@ var css = csjs`
     left              : 0;
   }
   .toggleRHP          {
-    margin            : 0.3em;
+    margin            : 0.5em;
     font-weight       : bold;
     color             : ${styles.colors.black};
     right             : 0;
@@ -139,49 +183,6 @@ var css = csjs`
   }
 `
 
-var cssTabs = yo`<style>
-#files .file {
-      padding: 0 0.6em;
-      box-sizing: border-box;
-      background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
-      cursor: pointer;
-      border-right: 0.5em solid white;
-      position: relative;
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-      color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
-  }
-  #files .file.active {
-      color: black;
-      font-weight: bold;
-      border-bottom: 0 none;
-      padding-right: 2em;
-  }
-  #files .file .remove {
-      position: absolute;
-      right: 0;
-      top: 0;
-      height: 1.25em;
-      width: 1.25em;
-      line-height: 1em;
-      color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-      display: none;
-      margin: 0.4em;
-      text-align: center;
-  }
-  #files .file input {
-      background-color: transparent;
-      border: 0 none;
-      border-bottom: 1px dotted black;
-      line-height: 1em;
-      margin: 0.5em 0;
-  }
-  #files .file.active .remove {
-      display: inline-block;
-  }
-  </style>`
-
 class EditorPanel {
   constructor (opts = {}) {
     var self = this
@@ -236,7 +237,7 @@ class EditorPanel {
   }
   _adjustLayout (direction, delta) {
     var limitUp = 0
-    var limitDown = 20
+    var limitDown = 32
     var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
     var self = this
     var layout = self.data._layout[direction]

src/app/panels/righthand-panel.js

@@ -66,7 +66,7 @@ var css = csjs`
     color: ${styles.colors.black};
   }
   .opts_li:hover {
-    color: ${styles.colors.orange};
+    color: ${styles.colors.grey};
   }
   .dragbar             {
     position           : absolute;
@@ -98,9 +98,9 @@ var css = csjs`
     margin-right: 30px;
     display: flex;
     align-self: center;
-    height: 20px;
+    height: 29px;
     width: 20px;
-    background-color: white;
+    background-color: ${styles.colors.transparent};
   }
 `
 

src/app/panels/terminal.js

@@ -21,8 +21,8 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     font-size         : 12px;
-    color             : #777;
-    background-color  : #ededed;
+    color             : ${styles.terminal.text_Regular_TransactionLog}
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     height            : 100%;
     min-height        : 1.7em;
     overflow          : hidden;
@@ -30,12 +30,13 @@ var css = csjs`
 
   .bar                {
     display           : flex;
-    min-height        : 1.7em;
+    min-height        : 3em;
     padding           : 2px;
-    background-color  : #eef;
+    background-color  : ${styles.terminal.backgroundColor_Menu};
     z-index           : 3;
   }
   .menu               {
+    color             : ${styles.terminal.text_Primary};
     position          : relative;
     display           : flex;
     align-items       : center;
@@ -46,20 +47,24 @@ var css = csjs`
     margin-left       : auto;
     width             : 10px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_TogglePanel};
     font-size         : 14px;
     font-weight       : bold;
   }
+  .toggleTerminal:hover              {
+    color             : ${styles.terminal.icon_HoverColor_TogglePanel};
+  }
   .clear              {
     margin-right      : 5px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_Menu};
   }
-  .hover              {
-    color             : orange;
+  .clear:hover              {
+    color             : ${styles.terminal.icon_HoverColor_Menu};
   }
 
   .terminal           {
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     display           : flex;
     flex-direction    : column;
     height            : 100%;
@@ -88,7 +93,7 @@ var css = csjs`
     font-family       : monospace;
     font-weight       : bold;
     font-size         : large;
-    color             : ${styles.colors.black}
+    color             : ${styles.colors.black};
   }
   .input              {
     word-break        : break-all;
@@ -96,7 +101,7 @@ var css = csjs`
     font-family       : monospace;
   }
   .filter             {
-    ${styles.inputField}
+    ${styles.terminal.input_Search_MenuBar}
     width             : 150px;
   }
 
@@ -108,12 +113,12 @@ var css = csjs`
     left              : 0;
     cursor            : ns-resize;
     z-index           : 999;
-    border-top        : 2px solid hsla(215, 81%, 79%, .3);
+    border-top        : 2px solid ${styles.terminal.bar_Dragging};
   }
   .ghostbar           {
     position          : absolute;
     height            : 6px;
-    background-color  : #C6CFF7;
+    background-color  : ${styles.terminal.bar_Ghost};
     opacity           : 0.5;
     cursor            : row-resize;
     z-index           : 9999;

src/app/ui/dropdown.js

@@ -8,11 +8,12 @@ var styles = styleGuide()
 
 var css = csjs`
   .dropdown           {
-    ${styles.dropdown}
+    ${styles.terminal.dropdown_Filter_MenuBar}
     overflow          : visible;
     position          : relative;
     display           : flex;
     flex-direction    : column;
+    margin-right      : 3px;
   }
   .selectbox          {
     display           : flex;
@@ -40,8 +41,8 @@ var css = csjs`
     top               : 24px;
     left              : 0;
     width             : 250px;
-    background-color  : white;
-    border            : 1px solid ${styles.colors.veryLightGrey};
+    background-color  : ${styles.app_properties.dropdown_BackgroundColor};
+    border            : 1px solid ${styles.app_properties.dropdown_BorderColor};
     border-radius     : 3px;
     border-top        : 0;
   }