Merge pull request #717 from ethereum/movingStyleGuide

Moved style-guide to remix and refactor browser-solidity accordingly

src/app.js

@@ -36,7 +36,7 @@ var Web3VMProvider = remix.web3.web3VMProvider
 var handleImports = require('./app/compiler/compiler-imports')
 var FileManager = require('./app/files/fileManager')
 
-var styleGuide = require('./style-guide')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`

src/app/files/file-explorer.js

@@ -7,7 +7,8 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
 
 var EventManager = require('ethereum-remix').lib.EventManager
 
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`

src/app/panels/editor-panel.js

@@ -1,7 +1,8 @@
 var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var EventManager = require('ethereum-remix').lib.EventManager
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var Terminal = require('./terminal')

src/app/panels/file-panel.js

@@ -10,7 +10,8 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
 var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 module.exports = filepanel

src/app/panels/righthand-panel.js

@@ -10,7 +10,8 @@ var supportTab = require('../tabs/support-tab')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`

src/app/staticanalysis/staticAnalysisView.js

@@ -5,7 +5,8 @@ var $ = require('jquery')
 var utils = require('../../lib/utils')
 var csjs = require('csjs-inject')
 
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -16,14 +17,17 @@ var css = csjs`
   .result {
     margin-top: 1%;
   }
-  .buttons extends ${styles.displayBox} {
+  .buttons  {
+    ${styles.displayBox}
     display: flex;
     align-items: center;
   }
-  .buttonRun extends ${styles.button} {
+  .buttonRun  {
+    ${styles.button}
     margin-right: 1%;
   }
-  .analysisModulesContainer extends ${styles.displayBox} {
+  .analysisModulesContainer {
+    ${styles.displayBox}
     margin-bottom: 1%;
     line-height: 2em;
     display: flex;

src/app/tabs/analysis-tab.js

@@ -2,7 +2,8 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -12,10 +13,12 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
-  .infoBox extends ${styles.infoTextBox} {
+  .infoBox  {
+    ${styles.infoTextBox}
     margin-bottom: 1em;
   }
-  .textBox extends ${styles.textBoxL} {
+  .textBox  {
+    ${styles.textBoxL}
     margin-bottom: 1em;
   }
 `

src/app/tabs/compile-tab.js

@@ -10,7 +10,8 @@ var modalDialog = require('../ui/modaldialog')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -21,7 +22,8 @@ var css = csjs`
     display: block;
     margin: 3% 0;
   }
-  .compileContainer extends ${styles.displayBox} {
+  .compileContainer  {
+    ${styles.displayBox}
     margin-bottom: 2%;
   }
   .autocompileContainer {
@@ -42,7 +44,7 @@ var css = csjs`
     line-height: initial;
   }
   .warnCompilationSlow {
-    color:  ${styles.colors.orange};
+    color: ${styles.colors.orange};
     margin-left: 1%;
   }
   .compileButtons {
@@ -56,18 +58,21 @@ var css = csjs`
   .size {
     display: flex;
   }
-  .compileButton extends ${styles.button} {
+  .compileButton {
+    ${styles.button}
     width: 120px;
     min-width: 110px;
     margin-right: 1%;
     font-size: 12px;
   }
-  .container extends ${styles.displayBox} {
+  .container {
+    ${styles.displayBox}
     margin: 0;
     display: flex;
     align-items: center;
   }
-  .contractNames extends ${styles.dropdown} {
+  .contractNames {
+    ${styles.dropdown}
     margin-right: 5%;
   }
   .contractButtons {
@@ -76,9 +81,11 @@ var css = csjs`
     justify-content: center;
     text-align: center;
   }
-  .details extends ${styles.button} {
+  .details {
+    ${styles.button}
   }
-  .publish extends ${styles.button} {
+  .publish {
+    ${styles.button}
     margin-left: 2%;
   }
   .log {

src/app/tabs/debugger-tab.js

@@ -2,14 +2,16 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
   .debuggerTabView {
     padding: 2%;
   }
-  .debugger extends ${styles.displayBox} {
+  .debugger {
+    ${styles.displayBox}
     margin-bottom: 1%;
   }
 `

src/app/tabs/run-tab.js

@@ -10,7 +10,8 @@ const copy = require('clipboard-copy')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -19,7 +20,8 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
-  .settings extends ${styles.displayBox} {
+  .settings {
+    ${styles.displayBox}
     margin-bottom: 2%;
     padding: 10px 15px 15px 15px;
   }
@@ -27,21 +29,25 @@ var css = csjs`
     margin-top: .5em;
     display: flex;
   }
-  .col1 extends ${styles.titleL} {
+  .col1 {
+    ${styles.titleL}
     width: 30%;
     float: left;
     align-self: center;
   }
-  .col1_1 extends ${styles.titleM} {
+  .col1_1 {
+    ${styles.titleM}
     font-size: 12px;
     width: 25%;
     min-width: 75px;
     float: left;
     align-self: center;
   }
-  .col2 extends ${styles.inputField}{
+  .col2 {
+    ${styles.inputField}
   }
-  .select extends ${styles.dropdown} {
+  .select {
+    ${styles.dropdown}
     text-align: center;
     font-weight: normal;
     min-width: 150px;
@@ -55,17 +61,20 @@ var css = csjs`
   .copyaddress:hover {
     color: ${styles.colors.grey};
   }
-  .instanceContainer extends ${styles.displayBox}  {
+  .instanceContainer {
+    ${styles.displayBox}
     display: flex;
     flex-direction: column;
     background-color: ${styles.colors.transparent};
     margin-top: 2%;
     border: none;
   }
-  .container extends ${styles.displayBox} {
+  .container {
+    ${styles.displayBox}
     margin-top: 2%;
   }
-  .contractNames extends ${styles.dropdown} {
+  .contractNames {
+    ${styles.dropdown}
   }
   .buttons {
     display: flex;
@@ -80,24 +89,28 @@ var css = csjs`
     align-items: center;
     margin-top: 2%;
   }
-  .atAddress extends ${styles.button} {
+  .atAddress {
+    ${styles.button}
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     background-color: ${styles.colors.lightGreen};
     border-color: ${styles.colors.lightGreen};
   }
-  .create extends ${styles.button} {
+  .create {
+    ${styles.button}
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     background-color: ${styles.colors.lightRed};
     border-color: ${styles.colors.lightRed};
   }
-  .input extends ${styles.inputField} {
+  .input {
+    ${styles.inputField}
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     padding-left: 10px;
   }
-  .noInstancesText extends ${styles.displayBox} {
+  .noInstancesText {
+    ${styles.displayBox}
     text-align: center;
     color: ${styles.colors.lightGrey};
     font-style: italic;
@@ -134,6 +147,8 @@ var css = csjs`
     border-radius: 3px;
   }
 `
+console.log(styles.displayBox.toString())
+console.log(css.settings.toString())
 
 module.exports = runTab
 

src/app/tabs/settings-tab.js

@@ -5,7 +5,8 @@ var QueryParams = require('../../lib/query-params')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -13,7 +14,8 @@ var css = csjs`
     padding: 2%;
     display: flex;
   }
-  .info extends ${styles.infoTextBox} {
+  .info {
+    ${styles.infoTextBox}
     margin-bottom: 2em;
     word-break: break-word;
   }
@@ -21,7 +23,8 @@ var css = csjs`
     margin-top: 1em;
     display: flex;
   }
-  .select extends ${styles.dropdown} {
+  .select {
+    ${styles.dropdown}
   }
 }
 `

src/app/tabs/support-tab.js

@@ -2,7 +2,8 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -14,7 +15,8 @@ var css = csjs`
     flex-direction: column;
     overflow: hidden;
   }
-  .chat extends ${styles.displayBox} {
+  .chat {
+    ${styles.displayBox}
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -43,14 +45,15 @@ var css = csjs`
   .chatTitleText {
     opacity: 0.8;
   }
-  .chatIframe extends ${styles.displayBox} {
+  .chatIframe {
+    ${styles.displayBox}
     width: 100%;
     height: 100%;
     transform: scale(0.9);
     padding: 0;
   }
-  .infoBox extends ${styles.infoTextBox}{
+  .infoBox {
-
+    ${styles.infoTextBox}
   }
 `
 

src/app/ui/modaldialog.js

@@ -1,6 +1,7 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var styleGuide = require('../../style-guide')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`

src/style-guide.js

@@ -1,198 +0,0 @@
-var csjs = require('csjs-inject')
-
-module.exports = styleGuide
-
-function styleGuide () {
-  /* --------------------------------------------------------------------------
-  COLORS
-  -------------------------------------------------------------------------- */
-  var colors = {
-    // BASIC COLORS (B&W and transparent)
-    transparent: 'transparent',
-    white: 'hsl(0, 0%, 100%)',
-    black: 'hsl(0, 0%, 0%)',
-    opacityBlack: 'hsla(0, 0%, 0%, .4)',
-    // BLUE
-    blue: 'hsla(229, 75%, 87%, 1)',
-    lightBlue: 'hsla(229, 75%, 87%, .5)',
-    backgroundBlue: 'hsla(229, 100%, 97%, 1)',
-    // GREY
-    grey: 'hsla(0, 0%, 40%, 1)',
-    lightGrey: 'hsla(0, 0%, 40%, .5)',
-    veryLightGrey: 'hsla(0, 0%, 40%, .2)',
-    // RED
-    red: 'hsla(0, 82%, 82%, 1)',
-    lightRed: 'hsla(0, 82%, 82%, .5)',
-    // GREEN
-    green: 'hsla(141, 75%, 84%, 1)',
-    lightGreen: 'hsla(141, 75%, 84%, .5)',
-    // PINK
-    pink: 'hsla(300, 69%, 76%, 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
-  -------------------------------------------------------------------------- */
-  var texts = csjs `
-    .title-XL {
-      font-size             : 2em;
-      font-weight           : 700;
-      letter-spacing        : .05em;
-    }
-
-    .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
-  -------------------------------------------------------------------------- */
-  var textBoxes = csjs`
-    .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;
-      font-size             : 12px;
-      border-radius         : 3px;
-      padding               : 0 8px;
-      overflow              : hidden;
-      word-break            : normal;
-    }
-  `
-  /* --------------------------------------------------------------------------
-                                    BUTTONS
-  -------------------------------------------------------------------------- */
-  var buttons = csjs`
-    .button {
-      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;
-      width                   : 70px;
-      min-width               : 70px;
-      font-size               : 12px;
-      overflow                : hidden;
-      word-break              : normal;
-      background-color        : #E8E8E8;
-    }
-
-    .button:hover {
-      opacity                 : 0.8;
-    }
-
-    .dropdown {
-      font-size               : 12px;
-      font-weight             : bold;
-      padding                 : 0 8px;
-      text-decoration         : none;
-      background-color        : ${colors.white};
-      cursor                  : pointer;
-      border                  : 1px solid ${colors.veryLightGrey};
-      border-radius           : 3px;
-      height                  : 25px;
-      width                   : 250px;
-      text-align              : center;
-      overflow                : hidden;
-      word-break              : normal;
-    }
-
-  `
-
-  return {
-    textBoxL: textBoxes['display-box-L'],
-    infoTextBox: textBoxes['info-text-box'],
-    inputField: textBoxes['input'],
-    displayBox: textBoxes['display-box'],
-    warningTextBox: textBoxes['warning-text-box'],
-    titleL: texts['title-L'],
-    titleM: texts['title-M'],
-    dropdown: buttons['dropdown'],
-    button: buttons['button'],
-    colors: colors,
-    titleBox: textBoxes['title-box']
-  }
-}

src/universal-dapp.js

@@ -20,7 +20,9 @@ const copy = require('clipboard-copy')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('./style-guide')
+
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
@@ -28,7 +30,8 @@ var css = csjs`
     display: flex;
     align-items: center;
   }
-  .title extends ${styles.dropdown} {
+  .title {
+    ${styles.dropdown}
     width: 400px;
     display: flex;
     justify-content: space-between;
@@ -43,7 +46,8 @@ var css = csjs`
     word-break: break-word;
     min-width: 230px;
   }
-  .instance extends ${styles.displayBox} {
+  .instance {
+    ${styles.displayBox}
     padding: 10px 15px 6px 15px;
   }
   .instance .title:before {