remove most of the old style guide reference and replace by bootstrap

src/app/components/swap-panel-component.js

 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-// const remixLib = require('remix-lib')
-
-// const styleguide = require('../ui/styles-guide/theme-chooser')
-// const styles = styleguide.chooser()
 
 class SwapPanelComponent {
   constructor (name, appStore, appManager, opt) {

src/app/editor/editor.js

@@ -38,14 +38,14 @@ document.head.appendChild(yo`
       position:absolute;
       z-index:20;
       background-color: var(--secondary);
-      opacity: 0.7
+      opacity: 0.6
     }
 
     .highlightreferenceline {
       position:absolute;
       z-index:20;
       background-color: var(--secondary);
-      opacity: 0.7
+      opacity: 0.6
     }
 
     .highlightcode {

src/app/editor/sourceHighlighter.js

 'use strict'
 const csjs = require('csjs-inject')
 const globlalRegistry = require('../../global/registry')
-const styleGuide = require('../ui/styles-guide/theme-chooser')
-const styles = styleGuide.chooser()
 
 class SourceHighlighter {
   constructor (localRegistry) {
@@ -48,12 +46,12 @@ class SourceHighlighter {
         .highlightcode {
           position:absolute;
           z-index:20;
-          background-color: ${style || styles.editor.backgroundColor_DebuggerMode};
+          background-color: ${style || 'var(--text-info)'};
         }
         .highlightcode_fullLine {
           position:absolute;
           z-index:20;
-          background-color: ${style || styles.editor.backgroundColor_DebuggerMode};
+          background-color: ${style || 'var(--text-info)'};
           opacity: 0.5;
         }
         `

src/app/editor/styles/contextView-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .contextview            {
@@ -16,7 +14,6 @@ var css = csjs`
     text-overflow       : ellipsis;
     overflow            : hidden;
     white-space         : nowrap;
-    color               : ${styles.editor.text_Primary};
     font-size           : 11px;
   }
   .type                   {
@@ -29,10 +26,9 @@ var css = csjs`
   .jump                   {
     cursor            : pointer;
     margin            : 0 5px;
-    color             : ${styles.editor.icon_Color_Editor};
   }
   .jump:hover              {
-    color             : ${styles.editor.icon_HoverColor_Editor};
+    color             : var(--secondary);
   }
   .referencesnb           {
     float             : right;

src/app/execution/confirmDialog.js

 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var styleGuide = require('../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .txInfoBox {
-    ${styles.rightPanel.compileTab.box_CompileContainer};  // add askToConfirmTXContainer to Remix and then replace this styling
   }
   .wrapword {
     white-space: pre-wrap;       /* Since CSS 2.1 */

src/app/execution/txLogger.js

@@ -5,8 +5,6 @@ var copyToClipboard = require('../ui/copy-to-clipboard')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
-var styleGuide = require('../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var EventManager = require('../../lib/events')
 var helper = require('../../lib/helper')
@@ -26,14 +24,14 @@ var css = csjs`
     opacity: 0.8;
   }
   .arrow {
-    color: ${styles.terminal.icon_Color_Menu};
+    color: var(--primary);
     font-size: 20px;
     cursor: pointer;
     display: flex;
     margin-left: 10px;
   }
   .arrow:hover {
-    color: ${styles.terminal.icon_HoverColor_Menu};
+    color: var(--secondary);
   }
   .txLog {
   }
@@ -44,28 +42,27 @@ var css = csjs`
     float: left;
   }
   .succeeded {
-    color: ${styles.terminal.icon_Color_Log_Succeed};
+    color: var(--success);
   }
   .failed {
-    color: ${styles.terminal.icon_Color_Log_Failed};
+    color: var(--danger);
   }
   .notavailable {
   }
   .call {
     font-size: 7px;
-    background-color: ${styles.terminal.icon_BackgroundColor_Log_Call};
     border-radius: 50%;
     min-width: 20px;
     min-height: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: ${styles.terminal.icon_Color_Log_Call};
+    color: var(--primary);
     text-transform: uppercase;
     font-weight: bold;
   }
   .txItem {
-    color: ${styles.terminal.text_Primary};
+    color: var(--primary);
     margin-right: 5px;
     float: left;
   }
@@ -73,7 +70,7 @@ var css = csjs`
     font-weight: bold;
   }
   .tx {
-    color: ${styles.terminal.text_Title_TransactionLog};
+    color: var(--primary);
     font-weight: bold;
     float: left;
     margin-right: 10px;
@@ -83,8 +80,8 @@ var css = csjs`
   .td {
     border-collapse: collapse;
     font-size: 10px;
-    color: ${styles.terminal.text_Primary};
-    border: 1px solid ${styles.terminal.text_Secondary};
+    color: var(--primary);
+    border: 1px solid var(--secondary);
   }
   #txTable {
     margin-top: 1%;
@@ -110,7 +107,6 @@ var css = csjs`
     margin-left: auto;
   }
   .debug {
-    ${styles.terminal.button_Log_Debug}
     width: 55px;
     min-width: 55px;
     min-height: 20px;
@@ -240,7 +236,7 @@ function renderKnownTransaction (self, data) {
         ${checkTxStatus(data.receipt, txType)}
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-          <div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
+          <button class="${css.debug} btn" onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
         <i class="${css.arrow} fa fa-angle-down"></i>
       </div>

src/app/panels/file-panel.js

@@ -115,21 +115,17 @@ function filepanel (localRegistry) {
   fileExplorer.ensureRoot()
   configExplorer.ensureRoot()
   self._deps.fileProviders['localhost'].event.register('connecting', (event) => {
-    tooltip('Connecting to localhost. ' + JSON.stringify(event))
   })
 
   self._deps.fileProviders['localhost'].event.register('connected', (event) => {
-    tooltip('Connected to localhost. ' + JSON.stringify(event))
     fileSystemExplorer.show()
   })
 
   self._deps.fileProviders['localhost'].event.register('errored', (event) => {
-    tooltip('localhost connection errored. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 
   self._deps.fileProviders['localhost'].event.register('closed', (event) => {
-    tooltip('localhost connection closed. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 

src/app/tabs/settings-tab.js

@@ -6,7 +6,6 @@ var globalRegistry = require('../../global/registry')
 var tooltip = require('../ui/tooltip')
 var copyToClipboard = require('../ui/copy-to-clipboard')
 var styleGuide = require('../ui/styles-guide/theme-chooser')
-// var styles = styleGuide.chooser()
 var Storage = remixLib.Storage
 var EventManager = require('../../lib/events')
 

src/app/tabs/styles/compile-tab-styles.js

 const csjs = require('csjs-inject')
-// const styleGuide = require('../../ui/styles-guide/theme-chooser')
-// const styles = styleGuide.chooser()
 
 const css = csjs`
   .compilerArticle {

src/app/tabs/styles/settings-tab-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .settingsTabView {
@@ -8,7 +6,6 @@ var css = csjs`
     display: flex;
   }
   .info {
-    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
     margin-bottom: 1em;
     word-break: break-word;
   }
@@ -41,7 +38,6 @@ var css = csjs`
   .select {
     font-weight: bold;
     margin-top: 1em;
-    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
   }
   .heading {
     margin-bottom: 0;
@@ -64,7 +60,7 @@ var css = csjs`
     vertical-align: top;
   }
   i.warnIt {
-    color: ${styles.appProperties.warningText_Color};
+    color: var(--warning);
   }
   .icon {
     margin-right: .5em;

src/app/tabs/styles/support-tab-styles.js

 const csjs = require('csjs-inject')
-const styles = require('../../ui/styles-guide/theme-chooser').chooser()
 
 const css = csjs`
   .supportTabView {
@@ -12,7 +11,6 @@ const css = csjs`
     overflow-y: auto;
   }
   .chat {
-    ${styles.rightPanel.supportTab.box_IframeContainer}
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -49,7 +47,6 @@ const css = csjs`
     border: none;
   }
   .infoBox {
-    ${styles.rightPanel.supportTab.box_SupportInfo}
   }
   .remixdinstallation {
     padding: 3px;
@@ -57,7 +54,6 @@ const css = csjs`
     margin-left: 5px;
   }
   .info {
-    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo};
     margin-top: 1em;
     word-break: break-word;
   }

src/app/tabs/styles/tabbed-menu-styles.js

 const csjs = require('csjs-inject')
-const styles = require('../../ui/styles-guide/theme-chooser').chooser()
 
 const css = csjs`
   .menu {
     display: flex;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
   }
   .options {
     float: left;
@@ -23,7 +19,6 @@ const css = csjs`
     text-align: center;
   }
   .optionViews {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
     overflow: scroll;
     height: 100%;
   }
@@ -32,7 +27,6 @@ const css = csjs`
   }
   .optionViews .pre {
     word-wrap: break-word;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
     border-radius: 3px;
     display: inline-block;
     padding: 0 0.6em;

src/app/ui/contextMenu.js

 var yo = require('yo-yo')
 // -------------- copyToClipboard ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('./styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
     .container
     {
         display: none;
         position: fixed;
-        border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
+        border: 1px solid var(--primary);
         width:150px; 
-        background: ${styles.appProperties.solidBorderBox_BackgroundColor};
         border-radius: 2px;
         z-index: 1000;
     }
@@ -31,12 +28,12 @@ var css = csjs`
         padding-left: 5px;
         padding-right: 5px;
         padding-bottom: 3px;
-        color: ${styles.appProperties.solidBorderBox_TextColor};
+        color: var(--primary);
     }
 
     #menuitems :hover
     {
-        background: ${styles.appProperties.highlight_BackgroundColor};
+        background: $var(--seconday);
         border-radius: 2px;
     }
 `

src/app/ui/copy-to-clipboard.js

@@ -4,8 +4,6 @@ const copy = require('clipboard-copy')
 var addTooltip = require('./tooltip')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('./styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .copyIcon {
@@ -16,9 +14,6 @@ var css = csjs`
 
 module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
   var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
-  copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard
-  copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard }
-  copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard }
   copyIcon.onclick = (event) => {
     event.stopPropagation()
     var copiableContent

src/app/ui/draggableContent.js

 'use strict'
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var styleGuide = require('./styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .containerDraggableModal {
     position: absolute;
     z-index: 1000;
-    background-color: ${styles.appProperties.light_BackgroundColor};
     text-align: center;
     width: 500px;
     height: 500px;
-    border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
     overflow-y: hidden;
   }
 
   .headerDraggableModal {
     cursor: move;
     z-index: 10;
-    color: ${styles.appProperties.mainText_Color};
-    background-color: ${styles.appProperties.primary_BackgroundColor};
-    border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
     text-overflow: ellipsis;
     overflow-x: hidden;
   }
   
   .modalActions {
     float: right;
-    color: ${styles.appProperties.solidBorderBox_BorderColor};
   }
 
   .modalAction {
     padding-right: 1px;
     padding-left: 1px;
     cursor: pointer;
-    color: ${styles.appProperties.solidBorderBox_BorderColor};
   }
 `
 

src/app/ui/modaldialog.js

@@ -82,7 +82,7 @@ module.exports = (title, content, ok, cancel, focusSelector) => {
 function html () {
   return yo`<div id="modal-dialog" class="${css.modal}">
   <div id="modal-background" class="${css['modalBackground']}"> </div>
-  <div class="${css['modalContent']}">
+  <div class="${css['modalContent']} bg-warning text-info">
     <div class="${css['modalHeader']}">
     <h2></h2>
     <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>

src/app/ui/styles/auto-complete-popup-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .popup             {
@@ -40,11 +38,9 @@ var css = csjs`
     margin-left      : 20%;
     margin-bottom    : 32px;
     bottom           : 0px;
-    background-color : ${styles.colors.black};
     padding          : 0;
     line-height      : 18px;
     font-size        : 12px;
-    border           : 1px solid ${styles.colors.grey};
     width            : 50%;
     box-shadow       : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatebottom;

src/app/ui/styles/dropdown-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .dropdown           {
-    ${styles.terminal.dropdown_Filter_MenuBar}
     overflow          : visible;
     position          : relative;
     display           : flex;
@@ -38,8 +35,7 @@ var css = csjs`
     top               : 24px;
     left              : 0;
     width             : 250px;
-    background-color  : ${styles.appProperties.dropdown_BackgroundColor};
-    border            : 1px solid ${styles.appProperties.dropdown_BorderColor};
+    border            : 1px solid var(--primary);
     border-radius     : 3px;
     border-top        : 0;
   }

src/app/ui/styles/modaldialog-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .modal {
@@ -12,47 +10,37 @@ var css = csjs`
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: ${styles.colors.black}; /* Fallback color */
-    background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
     word-wrap: break-word;
   }
   .modalHeader {
     padding: 2px 16px;
-    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
     display: flex;
     justify-content: space-between;
   }
   .modalBody {
-    background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
-    color: ${styles.remix.modalDialog_text_Primary};
     padding: 1.5em;
     line-height: 1.5em;
   }
-  .modalBody em{
-    color: ${styles.remix.modalDialog_text_Em};
+  .modalBody em {
+    color: var(--text-info)
   }
-  .modalBody a{
-    color: ${styles.remix.modalDialog_text_Link};
+  .modalBody a {
+    color: color: var(--text-info)
   }
   .modalFooter {
     display: flex;
     justify-content: flex-end;
     padding: 10px 30px;
-    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
     text-align: right;
     font-weight: 700;
     cursor: pointer;
   }
   .modalContent {
     position: relative;
-    background-color: ${styles.colors.black};
     margin: auto;
     padding: 0;
     line-height: 18px;
-    font-size: 12px;
-    border: 1px solid ${styles.colors.grey};
+    font-size: 14px;
     width: 50%;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
@@ -62,16 +50,13 @@ var css = csjs`
   }
   .modalFooterOk {
     cursor: pointer;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalFooterCancel {
     margin-left: 1em;
     cursor: pointer;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalClose {
     margin: auto 0;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
     cursor: pointer;
   }
   .modalBackground {

src/app/ui/styles/tooltip-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('../styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .tooltip {
     z-index: 1001;
     display: inline-block;
     position: fixed;
-    background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
-    color: ${styles.remix.tooltip_CopyToClipboard_Color};
+    color: var(--primary)
     min-height: 50px;
     min-width: 290px;
     padding: 16px 24px 12px;

src/app/ui/tooltip.js

@@ -2,7 +2,7 @@ var yo = require('yo-yo')
 var css = require('./styles/tooltip-styles')
 
 module.exports = function addTooltip (tooltipText) {
-  var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>`
+  var tooltip = yo`<div class="${css.tooltip} bg-primary">${tooltipText}</div>`
   document.body.appendChild(tooltip)
   setTimeout(function () {
     document.body.removeChild(tooltip)

src/lib/panels-resize.js

 const yo = require('yo-yo')
 const csjs = require('csjs-inject')
-const styleGuide = require('../app/ui/styles-guide/theme-chooser')
-const styles = styleGuide.chooser()
 
 const css = csjs`
   .dragbar            {
@@ -12,11 +10,11 @@ const css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : ${styles.leftPanel.dragbarBorderRight};
+    border-right      : var(--primary);
   }
   .ghostbar           {
     width             : 3px;
-    background-color  : ${styles.colors.lightBlue};
+    background-color  : var(--primary);
     opacity           : 0.5;
     position          : absolute;
     cursor            : col-resize;