Merge pull request #575 from ethereum/theme

Refactoring for theme

src/ui/BasicPanel.js

@@ -3,6 +3,14 @@ var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .container {
+    width: 70%;
+  }
+`
+
 function BasicPanel (_name, _width, _height) {
   this.data
   this.name = _name
@@ -24,7 +32,8 @@ BasicPanel.prototype.show = function () {
 }
 
 BasicPanel.prototype.render = function () {
-  var view = yo`<div id='container' style=${ui.formatCss({'width': this.width}, style.panel.container)}>
+  var view = yo`
+    <div css=${css.container} id='container' style=${ui.formatCss({'width': this.width})}>
     <div style=${ui.formatCss(style.panel.title)}>
       ${this.name}
     </div>

src/ui/ButtonNavigator.js

@@ -14,21 +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.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .navigator:hover {
-    color: ${styles.colors.black}
+    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

@@ -2,10 +2,38 @@
 var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var styleDropdown = require('./styles/dropdownPanel')
-var basicStyles = require('./styles/basicStyles')
 var TreeView = require('./TreeView')
 var EventManager = require('../lib/eventManager')
 
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .title {
+    margin-top: 10px;
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    display: flex;
+    align-items: center;
+  }
+  .name {
+    font-weight: bold;
+  }
+  .icon {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin-right: 5%;
+  }
+  .eyeButton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin: 3px;
+    float: right;
+  }
+  .eyeButton:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+`
+
 function DropdownPanel (_name, _opts) {
   this.event = new EventManager()
   if (!_opts) {
@@ -79,12 +107,12 @@ DropdownPanel.prototype.render = function (overridestyle) {
         to {transform:rotate(359deg);}
       }
     </style>
-    <div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
+    <div class='${css.title} title' onclick=${function () { self.toggle() }}>
-      <div style=${ui.formatCss(styleDropdown.caret)} class='fa fa-caret-right'></div>
+      <div class='${css.icon} fa fa-caret-right'></div>
-      <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div><span></span>
+      <div class=${css.name}>${this.name}</div><span></span>
     </div>
     <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
-      <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} title='raw' class="btn fa fa-eye" type="button">
+      <button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
       </button>
       <i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
@@ -110,11 +138,11 @@ DropdownPanel.prototype.toggle = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   if (el.style.display === '') {
     el.style.display = 'none'
-    caret.className = 'fa fa-caret-right'
+    caret.className = `${css.icon} fa fa-caret-right`
     this.event.trigger('hide', [])
   } else {
     el.style.display = ''
-    caret.className = 'fa fa-caret-down'
+    caret.className = `${css.icon} fa fa-caret-down`
     this.event.trigger('show', [])
   }
 }
@@ -124,7 +152,7 @@ DropdownPanel.prototype.hide = function () {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = 'none'
-    caret.className = 'fa fa-caret-right'
+    caret.className = `${css.icon} fa fa-caret-right`
     this.event.trigger('hide', [])
   }
 }
@@ -134,7 +162,7 @@ DropdownPanel.prototype.show = function () {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = ''
-    caret.className = 'fa fa-caret-down'
+    caret.className = `${css.icon} fa fa-caret-down`
     this.event.trigger('show', [])
   }
 }

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,10 +35,14 @@ var css = csjs`
     justify-content: center;
   }
   .txbutton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .txbutton:hover {
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+  .txinfo {
+    margin-top: 5px;
   }
 `
 function TxBrowser (_parent) {
@@ -192,7 +196,7 @@ TxBrowser.prototype.render = function () {
           </div>
         </div>
         <span id='error'></span>
-        <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
+        <div style=${css.txinfo} id='txinfo'>
           ${this.basicPanel.render()}
         </div>
       </div>`

src/ui/styles/style-guide.js

@@ -4,155 +4,267 @@ module.exports = styleGuide
 
 function styleGuide () {
   /* --------------------------------------------------------------------------
-  COLORS
+
+                              CSS PROPERTIES
+
   -------------------------------------------------------------------------- */
-  var colors = {
+  var cssProperties = {
-    // BASIC COLORS (B&W and transparent)
+    /* ------------------------------------------------------
-    transparent: 'transparent',
+                              COLORS
-    white: 'hsl(0, 0%, 100%)',
+    ------------------------------------------------------ */
-    black: 'hsl(0, 0%, 0%)',
+    colors: {
-    opacityBlack: 'hsla(0, 0%, 0%, .4)',
+      // BASIC COLORS (B&W and transparent)
-    // BLUE
+      transparent: 'transparent',
-    blue: 'hsla(229, 75%, 87%, 1)',
+      white: 'hsl(0, 0%, 100%)',
-    lightBlue: 'hsla(229, 75%, 87%, .5)',
+      black: 'hsl(0, 0%, 0%)',
-    backgroundBlue: 'hsla(229, 100%, 97%, 1)',
+      opacityBlack: 'hsla(0, 0%, 0%, .4)',
-    // GREY
+      // BLUE
-    grey: 'hsla(0, 0%, 40%, 1)',
+      blue: 'hsla(229, 75%, 87%, 1)',
-    lightGrey: 'hsla(0, 0%, 40%, .5)',
+      lightBlue: 'hsla(229, 75%, 87%, .5)',
-    veryLightGrey: 'hsla(0, 0%, 40%, .2)',
+      backgroundBlue: 'hsla(229, 100%, 97%, 1)',
-    // RED
+      // GREY
-    red: 'hsla(0, 82%, 82%, 1)',
+      grey: 'hsla(0, 0%, 40%, 1)',
-    lightRed: 'hsla(0, 82%, 82%, .5)',
+      lightGrey: 'hsla(0, 0%, 40%, .5)',
-    // GREEN
+      veryLightGrey: 'hsla(0, 0%, 40%, .2)',
-    green: 'hsla(141, 75%, 84%, 1)',
+      // RED
-    lightGreen: 'hsla(141, 75%, 84%, .5)',
+      strongRed: 'hsla(0, 100%, 71%, 1)',
-    // PINK
+      red: 'hsla(0, 82%, 82%, 1)',
-    pink: 'hsla(300, 69%, 76%, 1)',
+      lightRed: 'hsla(0, 82%, 82%, .5)',
-    lightPink: 'hsla(300, 69%, 76%, .5)',
+      // GREEN
-    // YELLOW
+      green: 'hsla(141, 75%, 84%, 1)',
-    orange: 'hsla(44, 100%, 50%, 1)',
+      lightGreen: 'hsla(141, 75%, 84%, .5)',
-    lightOrange: 'hsla(44, 100%, 50%, .5)',
+      // PINK
-    // VIOLET
+      pink: 'hsla(300, 69%, 76%, 1)',
-    violet: 'hsla(240, 64%, 68%, 1)'
+      lightPink: 'hsla(300, 69%, 76%, .5)',
-  }
+      // YELLOW
+      orange: 'hsla(44, 100%, 50%, 1)',
+      lightOrange: 'hsla(44, 100%, 50%, .5)',
+      // VIOLET
+      violet: 'hsla(240, 64%, 68%, 1)'
+    },
 
-  /* --------------------------------------------------------------------------
+    /* ------------------------------------------------------
                               FONTS
-  -------------------------------------------------------------------------- */
+    ------------------------------------------------------ */
+    fonts: {
+      font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif'
+    },
 
-  var texts = {
+    /* ------------------------------------------------------
-    'title-XL': `
+                                  BORDERS
-      font-size             : 2em;
+    ------------------------------------------------------ */
-      font-weight           : 700;
+    borders: {
-      letter-spacing        : .05em;
+      primary_borderRadius: '3px',
-    `,
+      secondary_borderRadius: '5px'
-
+    }
-    'title-L': `
-      font-size             : 1em;
-      font-weight           : 600;
-    `,
-
-    'title-M': `
-      font-size             : 1em;
-      font-weight           : 400;
-    `,
-
-    'title-S': `
-      font-size             : .8em;
-      font-weight           : 300;
-    `,
-
-    'text': `
-      font-size             : .8em;
-    `
   }
 
   /* --------------------------------------------------------------------------
-                                TEXT-BOXES
+
-  -------------------------------------------------------------------------- */
+                                APP PROPERTIES
-  var textBoxes = {
+
-
-    'display-box': `
-      font-size             : 12px;
-      padding               : 10px 15px;
-      line-height           : 20px;
-      background            : ${colors.white};
-      border-radius         : 3px;
-      border                : 1px solid ${colors.veryLightGrey};
-      overflow              : hidden;
-      word-break            : break-word;
-      width                 : 100%;
-    `,
-
-    'info-text-box': `
-      background-color      : ${colors.white};
-      line-height           : 20px;
-      border                : .2em dotted ${colors.lightGrey};
-      padding               : 8px 15px;
-      border-radius         : 5px;
-      margin-bottom         : 1em;
-      overflow              : hidden;
-      word-break            : break-word;
-    `,
-
-    'warning-text-box': `
-      background-color      : ${colors.lightOrange};
-      line-height           : 20px;
-      padding               : 8px 15px;
-      border-radius         : 5px;
-      border                : .2em dotted ${colors.orange};
-      margin-bottom         : 1em;
-      overflow              : hidden;
-      word-break            : break-word;
-    `,
-
-    'error-text-box': `
-      background-color      : ${colors.lightRed};
-      line-height           : 20px;
-      padding               : 1em 1em .5em 1em;
-      border-radius         : 3px;
-      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
-      margin-bottom         : 1em;
-      overflow              : hidden;
-      word-break            : break-word;
-    `,
-
-    'title-box': `
-      margin-bottom         : 0.4em;
-      padding               : .3em;
-      background-color      : transparent;
-      font-weight           : bold;
-      display               : flex;
-      justify-content       : space-between;
-      word-wrap             : break-word;
-      position              : relative;
-      border-radius         : 3px;
-      overflow              : hidden;
-      word-break            : normal;
-    `,
-
-    'input': `
-      border                : 1px solid ${colors.veryLightGrey};
-      height                : 25px;
-      width                 : 250px;
-      border-radius         : 3px;
-      padding               : 0 8px;
-      overflow              : hidden;
-      word-break            : normal;
-    `
-  }
-  /* --------------------------------------------------------------------------
-                                    BUTTONS
   -------------------------------------------------------------------------- */
-  var buttons = {
 
-    'button': `
+  var appProperties = {
+    /* ------------------------------------------------------
+                          BACKGROUND COLORS
+    ------------------------------------------------------ */
+    primary_BackgroundColor: cssProperties.colors.white,
+    secondary_BackgroundColor: cssProperties.colors.backgroundBlue,
+    dark_BackgroundColor: cssProperties.colors.veryLightGrey,
+    light_BackgroundColor: cssProperties.colors.white,
+    /* ------------------------------------------------------
+                              RESIZING
+    ******************************************************** */
+    ghostBar: cssProperties.colors.lightBlue,
+    draggingBar: cssProperties.colors.lightBlue,
+
+    /* ------------------------------------------------------
+                            TEXT COLORS
+    ******************************************************** */
+    mainText_Color: cssProperties.colors.black,
+    supportText_Color: cssProperties.colors.grey,
+    errorText_Color: cssProperties.colors.strongRed,
+    warningText_Color: cssProperties.colors.orange,
+    infoText_Color: cssProperties.colors.violet,
+    /* ------------------------------------------------------
+                              ICONS
+    ******************************************************** */
+    icon_Color: cssProperties.colors.black,
+    icon_HoverColor: cssProperties.colors.orange,
+
+    /* ------------------------------------------------------
+                            MESSAGES
+    ******************************************************** */
+    // Success
+    success_TextColor: cssProperties.colors.black,
+    success_BackgroundColor: cssProperties.colors.lightGreen,
+    success_BorderColor: cssProperties.colors.green,
+
+    // Danger
+    danger_TextColor: cssProperties.colors.black,
+    danger_BackgroundColor: cssProperties.colors.lightRed,
+    danger_BorderColor: cssProperties.colors.red,
+
+    // Warning
+    warning_TextColor: cssProperties.colors.black,
+    warning_BackgroundColor: cssProperties.colors.lightOrange,
+    warning_BorderColor: cssProperties.colors.orange,
+
+    /* ------------------------------------------------------
+                          DROPDOWN
+    ******************************************************** */
+    dropdown_TextColor: cssProperties.colors.black,
+    dropdown_BackgroundColor: cssProperties.colors.white,
+    dropdown_BorderColor: cssProperties.colors.veryLightGrey,
+
+    /* ------------------------------------------------------
+                            INPUT
+    ******************************************************** */
+    input_TextColor: cssProperties.colors.black,
+    input_BackgroundColor: cssProperties.colors.white,
+    input_BorderColor: cssProperties.colors.veryLightGrey,
+
+    /* ------------------------------------------------------
+                      SOLID BORDER BOX
+    ******************************************************** */
+    solidBorderBox_TextColor: cssProperties.colors.black,
+    solidBorderBox_BackgroundColor: cssProperties.colors.white,
+    solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey,
+
+    /* ------------------------------------------------------
+                          BUTTONS
+    ******************************************************** */
+
+    /* .................
+          PRIMARY
+    .................. */
+    primaryButton_TextColor: cssProperties.colors.black,
+    primaryButton_BackgroundColor: cssProperties.colors.lightBlue,
+    primaryButton_BorderColor: cssProperties.colors.lightBlue,
+
+    /* .................
+          SECONDARY
+    .................. */
+    secondaryButton_TextColor: cssProperties.colors.black,
+    secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey,
+    secondaryButton_BorderColor: cssProperties.colors.veryLightGrey,
+
+    /* .................
+          SUCCESS
+    .................. */
+    successButton_TextColor: cssProperties.colors.white,
+    successButton_BackgroundColor: cssProperties.colors.green,
+    successButton_BorderColor: cssProperties.colors.green,
+
+    /* .................
+          DANGER
+    .................. */
+    dangerButton_TextColor: cssProperties.colors.white,
+    dangerButton_BackgroundColor: cssProperties.colors.red,
+    dangerButton_BorderColor: cssProperties.colors.red,
+
+    /* .................
+          WARNING
+    .................. */
+    warningButton_TextColor: cssProperties.colors.white,
+    warningButton_BackgroundColor: cssProperties.colors.lightOrange,
+    warningButton_BorderColor: cssProperties.colors.lightOrange,
+
+    /* .................
+          INFO
+    .................. */
+    infoButton_TextColor: cssProperties.colors.black,
+    infoButton_BackgroundColor: cssProperties.colors.white,
+    infoButton_BorderColor: cssProperties.colors.veryLightGrey,
+
+    /* .................
+          SOLIDITY
+    .................. */
+
+    // CALL
+    callButton_TextColor: cssProperties.colors.black,
+    callButton_BackgroundColor: cssProperties.colors.lightBlue,
+    callButton_BorderColor: cssProperties.colors.lightBlue,
+
+    // TRANSACTION
+    transactButton_TextColor: cssProperties.colors.black,
+    transactButton_BackgroundColor: cssProperties.colors.lightRed,
+    transactButton_BorderColor: cssProperties.colors.lightRed,
+
+    // PAYABLE TRANSACTION
+    transactPayableButton_TextColor: cssProperties.colors.black,
+    transactPayableButton_BackgroundColor: cssProperties.colors.red,
+    transactPayableButton_BorderColor: cssProperties.colors.red,
+
+    /* ------------------------------------------------------
+                            UI ELEMENTS
+    ******************************************************** */
+
+    uiElements: {
+      solidBorderBox: (opts = {}) => `
+        background-color      : ${opts.BackgroundColor};
+        border                : 1px solid ${opts.BorderColor};
+        color                 : ${opts.Color};
+        border-radius         : ${cssProperties.borders.primary_borderRadius};
+        font-size             : 12px;
+        padding               : 10px 15px;
+        line-height           : 20px;
+        overflow              : hidden;
+        word-break            : break-word;
+        width                 : 100%;
+      `,
+
+      dottedBorderBox: (opts = {}) => `
+        background-color      : ${opts.BackgroundColor};
+        border                : .2em dotted ${opts.BorderColor};
+        color                 : ${opts.Color};
+        border-radius         : ${cssProperties.borders.secondary_borderRadius};
+        line-height           : 20px;
+        padding               : 8px 15px;
+        margin-bottom         : 1em;
+        overflow              : hidden;
+        word-break            : break-word;
+      `,
+
+      inputField: (opts = {}) => `
+        background-color      : ${opts.BackgroundColor};
+        border                : 1px solid ${opts.BorderColor};
+        color                 : ${opts.Color};
+        border-radius         : ${cssProperties.borders.secondary_borderRadius};
+        height                : 25px;
+        width                 : 250px;
+        padding               : 0 8px;
+        overflow              : hidden;
+        word-break            : normal;
+      `,
+
+      dropdown: (opts = {}) => `
+        background-color      : ${opts.BackgroundColor};
+        border                : 1px solid ${opts.BorderColor};
+        color                 : ${opts.Color};
+        font-size               : 12px;
+        font-weight             : bold;
+        padding                 : 0 8px;
+        text-decoration         : none;
+        cursor                  : pointer;
+        border-radius           : 3px;
+        height                  : 25px;
+        width                   : 250px;
+        text-align              : center;
+        overflow                : hidden;
+        word-break              : normal;
+      `,
+
+      button: (opts = {}) => `
+      margin                  : 1px;
+      background-color        : ${opts.BackgroundColor};
+      border                  : .3px solid ${opts.BorderColor};
+      color                   : ${opts.Color};
       display                 : flex;
       align-items             : center;
       justify-content         : center;
-      border-color            : transparent;
       border-radius           : 3px;
-      border                  : .3px solid ${colors.veryLightGrey};
       cursor                  : pointer;
       min-height              : 25px;
       max-height              : 25px;
@@ -161,42 +273,358 @@ function styleGuide () {
       font-size               : 12px;
       overflow                : hidden;
       word-break              : normal;
-      background-color        : #E8E8E8;
+      `
-    `,
+    }
+  }
 
-    'button:hover': `
+  /* --------------------------------------------------------------------------
-      opacity                 : 0.8;
-    `,
 
-    'dropdown': `
+                            REMIX PROPERTIES
-      font-size               : 12px;
+
-      font-weight             : bold;
+  -------------------------------------------------------------------------- */
-      padding                 : 0 8px;
+
-      text-decoration         : none;
+  var remixProperties = {
-      background-color        : ${colors.white};
+    /* ------------------------------------------------------
-      cursor                  : pointer;
+                            REMIX GENERAL
-      border                  : 1px solid ${colors.veryLightGrey};
+    /* ------------------------------------------------------ */
-      border-radius           : 3px;
+    remix: {
-      height                  : 25px;
+      modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor,
-      width                   : 250px;
+      modalDialog_text_Primary: appProperties.mainText_Color,
-      text-align              : center;
+      modalDialog_text_Secondary: appProperties.supportText_Color,
-      overflow                : hidden;
+      modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor,
-      word-break              : normal;
+      modalDialog_Header_Footer_Color: appProperties.mainText_Color,
-    `
+      modalDialog_BoxDottedBorder_BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+      modalDialog_BoxDottedBorder_BorderColor: appProperties.solidBorderBox_BorderColor,
+      modalDialog_BoxDottedBorder_Color: appProperties.solidBorderBox_TextColor,
+      modalDialog_CopyToClipboard_Icon_Color: appProperties.icon_Color,
+      modalDialog_CopyToClipboard_Icon_HoverColor: appProperties.icon_HoverColor
+
+    },
+
+    /* ------------------------------------------------------
+                    LEFT PANEL (FILE PANEL)
+    /* ------------------------------------------------------ */
+    leftPanel: {
+      backgroundColor_Panel: appProperties.primary_BackgroundColor,
+      backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor,
+
+      text_Primary: appProperties.mainText_Color,
+      text_Secondary: appProperties.supportText_Color,
+
+      bar_Ghost: appProperties.ghostBar,
+      bar_Dragging: appProperties.draggingBar,
+
+      icon_Color_Menu: appProperties.icon_Color,
+      icon_HoverColor_Menu: appProperties.icon_HoverColor,
+
+      icon_Color_TogglePanel: appProperties.icon_Color,
+      icon_HoverColor_TogglePanel: appProperties.icon_HoverColor
+
+    },
+
+    /* ------------------------------------------------------
+                              EDITOR
+    /* ------------------------------------------------------ */
+    editor: {
+      backgroundColor_Panel: appProperties.primary_BackgroundColor,
+      backgroundColor_Editor: appProperties.light_BackgroundColor,
+      backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor,
+      backgroundColor_Editor_Context_Highlights: appProperties.dark_BackgroundColor,
+      backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor,
+      backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor,
+
+      text_Primary: appProperties.mainText_Color,
+      text_Secondary: appProperties.supportText_Color,
+      text_Editor: '',
+
+      icon_Color_Editor: appProperties.icon_Color,
+      icon_HoverColor_Editor: appProperties.icon_HoverColor
+
+    },
+
+    /* ------------------------------------------------------
+                          TERMINAL
+    /* ------------------------------------------------------ */
+    terminal: {
+      backgroundColor_Menu: appProperties.secondary_BackgroundColor,
+      backgroundColor_Terminal: appProperties.dark_BackgroundColor,
+
+      text_Primary: appProperties.mainText_Color,
+      text_Secondary: appProperties.supportText_Color,
+      text_RegularLog: appProperties.mainText_Color,
+      text_InfoLog: appProperties.supportText_Color,
+      text_ErrorLog: appProperties.errorText_Color,
+      text_Title_TransactionLog: appProperties.infoText_Color,
+      text_Regular_TransactionLog: appProperties.supportText_Color,
+
+      icon_Color_TogglePanel: appProperties.icon_Color,
+      icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
+      icon_Color_Menu: appProperties.icon_Color,
+      icon_HoverColor_Menu: appProperties.icon_HoverColor,
+      icon_Color_CopyToClipboard: appProperties.icon_Color,
+      icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
+
+      bar_Ghost: appProperties.ghostBar,
+      bar_Dragging: appProperties.draggingBar,
+
+      input_Search_MenuBar: appProperties.uiElements.inputField({
+        BackgroundColor: appProperties.input_BackgroundColor,
+        BorderColor: appProperties.input_BorderColor,
+        Color: appProperties.input_TextColor
+      }),
+
+      dropdown_Filter_MenuBar: appProperties.uiElements.dropdown({
+        BackgroundColor: appProperties.dropdown_BackgroundColor,
+        BorderColor: appProperties.dropdown_BorderColor,
+        Color: appProperties.dropdown_TextColor
+      }),
+
+      button_Log_Debug: appProperties.uiElements.button({
+        BackgroundColor: appProperties.warningButton_BackgroundColor,
+        BorderColor: appProperties.warningButton_BorderColor,
+        Color: appProperties.warningButton_TextColor
+      }),
+
+      button_Log_Details: appProperties.uiElements.button({
+        BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+        BorderColor: appProperties.warningButton_BorderColor,
+        Color: appProperties.warningButton_TextColor
+      })
+
+    },
+
+    /* ------------------------------------------------------
+                              RIGHT PANEL
+    /* ------------------------------------------------------ */
+    rightPanel: {
+      backgroundColor_Panel: appProperties.primary_BackgroundColor,
+      backgroundColor_Tab: appProperties.secondary_BackgroundColor,
+      BackgroundColor_Pre: appProperties.light_BackgroundColor,
+
+      text_Primary: appProperties.mainText_Color,
+      text_Secondary: appProperties.supportText_Color,
+
+      bar_Ghost: appProperties.ghostBar,
+      bar_Dragging: appProperties.draggingBar,
+
+      icon_Color_TogglePanel: appProperties.icon_Color,
+      icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
+
+      message_Warning_BackgroundColor: appProperties.warning_BackgroundColor,
+      message_Warning_BorderColor: appProperties.warning_BorderColor,
+      message_Warning_Color: appProperties.warning_TextColor,
+
+      message_Error_BackgroundColor: appProperties.danger_BackgroundColor,
+      message_Error_BorderColor: appProperties.danger_BorderColor,
+      message_Error_Color: appProperties.danger_TextColor,
+
+      message_Success_BackgroundColor: appProperties.success_BackgroundColor,
+      message_Success_BorderColor: appProperties.success_BorderColor,
+      message_Success_Color: appProperties.success_TextColor,
+
+      /* ::::::::::::::
+          COMPILE TAB
+      ::::::::::::::: */
+      compileTab: {
+        button_Compile: appProperties.uiElements.button({
+          BackgroundColor: appProperties.primaryButton_BackgroundColor,
+          BorderColor: appProperties.primaryButton_BorderColor,
+          Color: appProperties.primaryButton_TextColor
+        }),
+
+        button_Details: appProperties.uiElements.button({
+          BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+          BorderColor: appProperties.secondaryButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
+        }),
+
+        button_Publish: appProperties.uiElements.button({
+          BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+          BorderColor: appProperties.secondaryButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
+        }),
+
+        dropdown_CompileContract: appProperties.uiElements.dropdown({
+          BackgroundColor: appProperties.dropdown_BackgroundColor,
+          BorderColor: appProperties.dropdown_BorderColor,
+          Color: appProperties.dropdown_TextColor
+        }),
+
+        box_CompileContainer: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        icon_WarnCompilation_Color: appProperties.warning_BackgroundColor
+
+      },
+
+      /* ::::::::::::::
+          RUN TAB
+      ::::::::::::::: */
+      runTab: {
+        box_RunTab: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        dropdown_RunTab: appProperties.uiElements.dropdown({
+          BackgroundColor: appProperties.dropdown_BackgroundColor,
+          BorderColor: appProperties.dropdown_BorderColor,
+          Color: appProperties.dropdown_TextColor
+        }),
+
+        input_RunTab: appProperties.uiElements.inputField({
+          BackgroundColor: appProperties.input_BackgroundColor,
+          BorderColor: appProperties.input_BorderColor,
+          Color: appProperties.input_TextColor
+        }),
+
+        box_Instance: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        button_atAddress: appProperties.uiElements.button({
+          BackgroundColor: appProperties.primaryButton_BackgroundColor,
+          BorderColor: appProperties.primaryButton_BorderColor,
+          Color: appProperties.primaryButton_TextColor
+        }),
+
+        button_Create: appProperties.uiElements.button({
+          BackgroundColor: appProperties.primaryButton_BackgroundColor,
+          BorderColor: appProperties.primaryButton_BorderColor,
+          Color: appProperties.primaryButton_TextColor
+        }),
+
+        button_Instance_Call: appProperties.uiElements.button({
+          BackgroundColor: appProperties.callButton_BackgroundColor,
+          BorderColor: appProperties.callButton_BorderColor,
+          Color: appProperties.callButton_TextColor
+        }),
+
+        button_Instance_Transact: appProperties.uiElements.button({
+          BackgroundColor: appProperties.transactButton_BackgroundColor,
+          BorderColor: appProperties.transactButton_BorderColor,
+          Color: appProperties.transactButton_TextColor
+        }),
+
+        button_Instance_TransactPayable: appProperties.uiElements.button({
+          BackgroundColor: appProperties.transactPayableButton_BackgroundColor,
+          BorderColor: appProperties.transactPayableButton_BorderColor,
+          Color: appProperties.transactPayableButton_TextColor
+        }),
+
+        icon_Color_Instance_CopyToClipboard: appProperties.icon_Color,
+        icon_HoverColor_Instance_CopyToClipboard: appProperties.icon_HoverColor
+
+      },
+
+      /* ::::::::::::::
+         SETTINGS TAB
+      ::::::::::::::: */
+      settingsTab: {
+        box_SolidityVersionInfo: appProperties.uiElements.dottedBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        dropdown_SelectCompiler: appProperties.uiElements.dropdown({
+          BackgroundColor: appProperties.dropdown_BackgroundColor,
+          BorderColor: appProperties.dropdown_BorderColor,
+          Color: appProperties.dropdown_TextColor
+        })
+
+      },
+
+      /* ::::::::::::::
+        DEBUGGER TAB
+      ::::::::::::::: */
+      debuggerTab: {
+        text_Primary: appProperties.mainText_Color,
+        text_Secondary: appProperties.supportText_Color,
+
+        box_Debugger: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        button_Debugger: appProperties.uiElements.button({
+          BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+          BorderColor: appProperties.secondaryButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
+        }),
+
+        button_Debugger_icon_Color: appProperties.icon_Color,
+        button_Debugger_icon_HoverColor: appProperties.icon_HoverColor,
+
+        dropdown_Debugger: appProperties.uiElements.dropdown({
+          BackgroundColor: appProperties.dropdown_BackgroundColor,
+          BorderColor: appProperties.dropdown_BorderColor,
+          Color: appProperties.dropdown_TextColor
+        }),
+
+        input_Debugger: appProperties.uiElements.inputField({
+          BackgroundColor: appProperties.input_BackgroundColor,
+          BorderColor: appProperties.input_BorderColor,
+          Color: appProperties.input_TextColor
+        }),
+
+        debuggerDropdowns_Instructions_Highlight_BackgroundColor: appProperties.secondary_BackgroundColor
+
+      },
+
+      /* ::::::::::::::
+        ANALYSIS TAB
+      ::::::::::::::: */
+      analysisTab: {
+        button_Run_AnalysisTab: appProperties.uiElements.button({
+          BackgroundColor: appProperties.primaryButton_BackgroundColor,
+          BorderColor: appProperties.primaryButton_BorderColor,
+          Color: appProperties.primaryButton_TextColor
+        }),
+
+        box_AnalysisContainer: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        })
+      },
+
+      /* ::::::::::::::
+        SUPPORT TAB
+      ::::::::::::::: */
+      supportTab: {
+        box_IframeContainer: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        box_SupportInfo: appProperties.uiElements.dottedBorderBox({
+          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBorderBox_TextColor
+        })
+
+      }
 
+    }
   }
 
   return {
-    textBoxL: textBoxes['display-box-L'],
+    colors: cssProperties.colors,
-    infoTextBox: textBoxes['info-text-box'],
+    appProperties: appProperties,
-    inputField: textBoxes['input'],
+    borders: cssProperties.borders,
-    displayBox: textBoxes['display-box'],
+    leftPanel: remixProperties.leftPanel,
-    warningTextBox: textBoxes['warning-text-box'],
+    editor: remixProperties.editor,
-    titleL: texts['title-L'],
+    terminal: remixProperties.terminal,
-    titleM: texts['title-M'],
+    rightPanel: remixProperties.rightPanel,
-    dropdown: buttons['dropdown'],
+    remix: remixProperties.remix
-    button: buttons['button'],
-    colors: colors,
-    titleBox: textBoxes['title-box']
   }
 }