First draft - themeable Remix

src/ui/ButtonNavigator.js

@@ -14,24 +14,24 @@ var css = csjs`
   .stepButtons {
     width: 100%;
     display: flex;
-    justify-content: center
+    justify-content: center;
   }
   .stepButton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .jumpButtons {
     width: 100%;
     display: flex;
-    justify-content: center
+    justify-content: center;
   }
   .jumpButton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .navigator {
-    color: ${styles.colors.black}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .navigator:hover {
-    color: ${styles.colors.orange}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
 `
 

src/ui/CodeListView.js

@@ -4,7 +4,18 @@ var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var DropdownPanel = require('./DropdownPanel')
 var EventManager = require('../lib/eventManager')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
 
+var css = csjs`
+  .instructions {
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+    width: 75%;
+    overflow-y: scroll;
+    max-height: 250px;
+  }
+`
 function CodeListView (_parent, _codeManager) {
   this.event = new EventManager()
   this.parent = _parent
@@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () {
     var codeView = this.code.map(function (item, i) {
       return yo`<div key=${i} value=${i}><span>${item}</span></div>`
     })
-    return yo`<div id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
+    return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
       ${codeView}
     </div>`
   }

src/ui/DropdownPanel.js

@@ -13,25 +13,25 @@ var styles = styleGuide()
 var css = csjs`
   .title {
     margin-top: 10px;
-    ${styles.dropdown}
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
     display: flex;
     align-items: center;
   }
   .name {
-    color: ${styles.colors.black};
     font-weight: bold;
   }
   .icon {
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
     margin-right: 5%;
   }
   .eyeButton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
     margin: 3px;
     float: right;
   }
   .eyeButton:hover {
-    color: ${styles.colors.orange};
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
 `
 

src/ui/TxBrowser.js

@@ -25,7 +25,7 @@ var css = csjs`
     justify-content: center;
   }
   .txinput {
-    ${styles.inputField}
+    ${styles.rightPanel.debuggerTab.input_Debugger}
     min-width: 30px;
     margin: 3px;
   }
@@ -35,11 +35,11 @@ var css = csjs`
     justify-content: center;
   }
   .txbutton {
-    ${styles.button}
-    color: ${styles.colors.black};
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .txbutton:hover {
-    color: ${styles.colors.orange};
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
   .txinfo {
     margin-top: 5px;