From 6f830b63b1d143be93987eeb58e669a081a8a538 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 4 Oct 2017 17:48:51 +0200 Subject: [PATCH] standard --- src/ui/BasicPanel.js | 2 - src/ui/DropdownPanel.js | 1 - src/ui/styles/style-guide.js | 979 +++++++++++++++++------------------ 3 files changed, 481 insertions(+), 501 deletions(-) diff --git a/src/ui/BasicPanel.js b/src/ui/BasicPanel.js index afa9ee88c1..ac3562b9fd 100644 --- a/src/ui/BasicPanel.js +++ b/src/ui/BasicPanel.js @@ -4,8 +4,6 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var csjs = require('csjs-inject') -var styleGuide = require('./styles/style-guide') -var styles = styleGuide() var css = csjs` .container { diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 225469d157..f1328f1aca 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -2,7 +2,6 @@ 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') diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 32d51d3b46..36a32abb17 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -3,17 +3,15 @@ module.exports = styleGuide function styleGuide () { - /* -------------------------------------------------------------------------- CSS PROPERTIES -------------------------------------------------------------------------- */ - var css_properties = { - - /******************************************************** - COLORS - ******************************************************** */ + var cssProperties = { + /* ------------------------------------------------------ + COLORS + ------------------------------------------------------ */ colors: { // BASIC COLORS (B&W and transparent) transparent: 'transparent', @@ -44,16 +42,16 @@ function styleGuide () { violet: 'hsla(240, 64%, 68%, 1)' }, - /******************************************************** - FONTS - ******************************************************** */ + /* ------------------------------------------------------ + FONTS + ------------------------------------------------------ */ fonts: { - font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', + font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif' }, - /******************************************************** - BORDERS - ******************************************************** */ + /* ------------------------------------------------------ + BORDERS + ------------------------------------------------------ */ borders: { primary_borderRadius: '3px', secondary_borderRadius: '5px' @@ -66,580 +64,565 @@ function styleGuide () { -------------------------------------------------------------------------- */ - var app_properties = { - - /******************************************************** - BACKGROUND COLORS - ******************************************************** */ - primary_BackgroundColor: css_properties.colors.white, - secondary_BackgroundColor: css_properties.colors.backgroundBlue, - dark_BackgroundColor: css_properties.colors.veryLightGrey, - light_BackgroundColor: css_properties.colors.white, - - /******************************************************** - RESIZING - ******************************************************** */ - ghostBar: css_properties.colors.lightBlue, - draggingBar: css_properties.colors.lightBlue, - - /******************************************************** - TEXT COLORS - ******************************************************** */ - mainText_Color: css_properties.colors.black, - supportText_Color: css_properties.colors.grey, - errorText_Color: css_properties.colors.red, - warningText_Color: css_properties.colors.orange, - - /******************************************************** - ICONS - ******************************************************** */ - icon_Color: css_properties.colors.black, - icon_HoverColor: css_properties.colors.orange, - - /******************************************************** - MESSAGES - ******************************************************** */ + 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.red, + warningText_Color: cssProperties.colors.orange, + + /* ------------------------------------------------------ + ICONS + ******************************************************** */ + icon_Color: cssProperties.colors.black, + icon_HoverColor: cssProperties.colors.orange, + + /* ------------------------------------------------------ + MESSAGES + ******************************************************** */ // Success - success_TextColor: css_properties.colors.black, - success_BackgroundColor: css_properties.colors.lightGreen, - success_BorderColor: css_properties.colors.green, + success_TextColor: cssProperties.colors.black, + success_BackgroundColor: cssProperties.colors.lightGreen, + success_BorderColor: cssProperties.colors.green, // Danger - danger_TextColor: css_properties.colors.black, - danger_BackgroundColor: css_properties.colors.lightRed, - danger_BorderColor: css_properties.colors.red, + danger_TextColor: cssProperties.colors.black, + danger_BackgroundColor: cssProperties.colors.lightRed, + danger_BorderColor: cssProperties.colors.red, // Warning - warning_TextColor: css_properties.colors.black, - warning_BackgroundColor: css_properties.colors.lightOrange, - warning_BorderColor: css_properties.colors.orange, - - /******************************************************** - DROPDOWN - ******************************************************** */ - dropdown_TextColor: css_properties.colors.black, - dropdown_BackgroundColor: css_properties.colors.white, - dropdown_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - INPUT - ******************************************************** */ - input_TextColor: css_properties.colors.black, - input_BackgroundColor: css_properties.colors.white, - input_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - SOLID BORDER BOX - ******************************************************** */ - solidBorderBox_TextColor: css_properties.colors.black, - solidBorderBox_BackgroundColor: css_properties.colors.white, - solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - BUTTONS - ******************************************************** */ + 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: css_properties.colors.black, - primaryButton_BackgroundColor: css_properties.colors.lightBlue, - primaryButton_BorderColor: css_properties.colors.lightBlue, + primaryButton_TextColor: cssProperties.colors.black, + primaryButton_BackgroundColor: cssProperties.colors.lightBlue, + primaryButton_BorderColor: cssProperties.colors.lightBlue, /* ................. SECONDARY .................. */ - secondaryButton_TextColor: css_properties.colors.black, - secondaryButton_BackgroundColor: css_properties.colors.veryLightGrey, - secondaryButton_BorderColor: css_properties.colors.veryLightGrey, + secondaryButton_TextColor: cssProperties.colors.black, + secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey, + secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. SUCCESS .................. */ - successButton_TextColor: css_properties.colors.white, - successButton_BackgroundColor: css_properties.colors.green, - successButton_BorderColor: css_properties.colors.green, + successButton_TextColor: cssProperties.colors.white, + successButton_BackgroundColor: cssProperties.colors.green, + successButton_BorderColor: cssProperties.colors.green, /* ................. DANGER .................. */ - dangerButton_TextColor: css_properties.colors.white, - dangerButton_BackgroundColor: css_properties.colors.red, - dangerButton_BorderColor: css_properties.colors.red, + dangerButton_TextColor: cssProperties.colors.white, + dangerButton_BackgroundColor: cssProperties.colors.red, + dangerButton_BorderColor: cssProperties.colors.red, /* ................. WARNING .................. */ - warningButton_TextColor: css_properties.colors.white, - warningButton_BackgroundColor: css_properties.colors.orange, - warningButton_BorderColor: css_properties.colors.orange, + warningButton_TextColor: cssProperties.colors.white, + warningButton_BackgroundColor: cssProperties.colors.orange, + warningButton_BorderColor: cssProperties.colors.orange, /* ................. INFO .................. */ - infoButton_TextColor: css_properties.colors.black, - infoButton_BackgroundColor: css_properties.colors.white, - infoButton_BorderColor: css_properties.colors.veryLightGrey, + infoButton_TextColor: cssProperties.colors.black, + infoButton_BackgroundColor: cssProperties.colors.white, + infoButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. SOLIDITY .................. */ // CALL - callButton_TextColor: css_properties.colors.black, - callButton_BackgroundColor: css_properties.colors.lightBlue, - callButton_BorderColor: css_properties.colors.lightBlue, + callButton_TextColor: cssProperties.colors.black, + callButton_BackgroundColor: cssProperties.colors.lightBlue, + callButton_BorderColor: cssProperties.colors.lightBlue, // TRANSACTION - transactButton_TextColor: css_properties.colors.black, - transactButton_BackgroundColor: css_properties.colors.lightRed, - transactButton_BorderColor: css_properties.colors.lightRed, + transactButton_TextColor: cssProperties.colors.black, + transactButton_BackgroundColor: cssProperties.colors.lightRed, + transactButton_BorderColor: cssProperties.colors.lightRed, // PAYABLE TRANSACTION - transactPayableButton_TextColor: css_properties.colors.black, - transactPayableButton_BackgroundColor: css_properties.colors.red, - transactPayableButton_BorderColor: css_properties.colors.red, + transactPayableButton_TextColor: cssProperties.colors.black, + transactPayableButton_BackgroundColor: cssProperties.colors.red, + transactPayableButton_BorderColor: cssProperties.colors.red, - /******************************************************** - UI ELEMENTS - ******************************************************** */ + /* ------------------------------------------------------ + UI ELEMENTS + ******************************************************** */ uiElements: { - solidBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor}; - border : 1px solid ${opts.BorderColor}; - color : ${opts.Color}; - border-radius : ${css_properties.borders.primary_borderRadius}; - font-size : 12px; - padding : 10px 15px; - line-height : 20px; - overflow : hidden; - word-break : break-word; - width : 100%; + 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 : ${css_properties.borders.secondary_borderRadius}; - line-height : 20px; - padding : 8px 15px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; + 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 : ${css_properties.borders.secondary_borderRadius}; - height : 25px; - width : 250px; - padding : 0 8px; - overflow : hidden; - word-break : normal; + 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; + 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-radius : 3px; - cursor : pointer; - min-height : 25px; - max-height : 25px; - width : 70px; - min-width : 70px; - font-size : 12px; - overflow : hidden; - word-break : normal; + margin : 1px + background-color : ${opts.BackgroundColor} + border : .3px solid ${opts.BorderColor} + color : ${opts.Color} + display : flex + align-items : center + justify-content : center + border-radius : 3px + cursor : pointer + min-height : 25px + max-height : 25px + width : 70px + min-width : 70px + font-size : 12px + overflow : hidden + word-break : normal ` } -} - -/* -------------------------------------------------------------------------- - - REMIX PROPERTIES - --------------------------------------------------------------------------- */ - -var remix_properties = { - -/******************************************************** - REMIX GENERAL -/******************************************************** */ - remix: { - - modalDialog_BackgroundColor_Primary: app_properties.primary_BackgroundColor, - modalDialog_text_Primary: app_properties.mainText_Color, - modalDialog_text_Secondary: app_properties.supportText_Color, - modalDialog_Header_Footer_BackgroundColor: app_properties.secondary_BackgroundColor, - modalDialog_Header_Footer_Color: app_properties.mainText_Color, - modalDialog_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - modalDialog_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor, - modalDialog_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor, - modalDialog_CopyToClipboard_Icon_Color: app_properties.icon_Color, - modalDialog_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor - - }, - -/******************************************************** - LEFT PANEL (FILE PANEL) -/******************************************************** */ - leftPanel: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_FileExplorer: app_properties.secondary_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - icon_Color_Menu: app_properties.icon_Color, - icon_HoverColor_Menu: app_properties.icon_HoverColor, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - - }, - -/******************************************************** - EDITOR -/******************************************************** */ - editor: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_Editor: app_properties.light_BackgroundColor, - backgroundColor_Tabs_Highlights: app_properties.secondary_BackgroundColor, - backgroundColor_DebuggerMode: app_properties.warning_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - text_Editor: '', - - icon_Color_Editor: app_properties.icon_Color, - icon_HoverColor_Editor: app_properties.icon_HoverColor, - - }, - -/******************************************************** - TERMINAL -/******************************************************** */ - terminal: { - - backgroundColor_Menu: app_properties.secondary_BackgroundColor, - backgroundColor_Terminal: app_properties.dark_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - text_RegularLog: app_properties.mainText_Color, - text_InfoLog: app_properties.supportText_Color, - text_ErrorLog: app_properties.errorText_Color, - text_Title_TransactionLog: app_properties.warningText_Color, - text_Regular_TransactionLog: app_properties.supportText_Color, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - icon_Color_Menu: app_properties.icon_Color, - icon_HoverColor_Menu: app_properties.icon_HoverColor, - icon_Color_CopyToClipboard: app_properties.icon_Color, - icon_HoverColor_CopyToClipboard: app_properties.icon_HoverColor, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - input_Search_MenuBar: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor - }), - - dropdown_Filter_MenuBar: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), - - button_Log_Debug: app_properties.uiElements.button({ - BackgroundColor: app_properties.warningButton_BackgroundColor, - BorderColor: app_properties.warningButton_BorderColor, - Color: app_properties.warningButton_TextColor - }), - - button_Log_Details: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }) - - }, - -/******************************************************** - RIGHT PANEL -/******************************************************** */ - rightPanel: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_Tab: app_properties.secondary_BackgroundColor, - BackgroundColor_Pre: app_properties.light_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - - message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, - message_Warning_BorderColor: app_properties.warning_BorderColor, - message_Warning_Color: app_properties.warning_TextColor, - - message_Error_BackgroundColor: app_properties.danger_BackgroundColor, - message_Error_BorderColor: app_properties.danger_BorderColor, - message_Error_Color: app_properties.danger_TextColor, - - message_Success_BackgroundColor: app_properties.success_BackgroundColor, - message_Success_BorderColor: app_properties.success_BorderColor, - message_Success_Color: app_properties.success_TextColor, - - /* :::::::::::::: - COMPILE TAB - ::::::::::::::: */ - compileTab: { - - button_Compile: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - button_Details: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), + } - button_Publish: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), + /* -------------------------------------------------------------------------- - dropdown_CompileContract: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + REMIX PROPERTIES - box_CompileContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + -------------------------------------------------------------------------- */ - icon_WarnCompilation_Color: app_properties.warning_BackgroundColor, + var remixProperties = { + /* ------------------------------------------------------ + REMIX GENERAL + /* ------------------------------------------------------ */ + remix: { + modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor, + modalDialog_text_Primary: appProperties.mainText_Color, + modalDialog_text_Secondary: appProperties.supportText_Color, + modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor, + 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 }, - /* :::::::::::::: - RUN TAB - ::::::::::::::: */ - runTab: { - - box_RunTab: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), - - dropdown_RunTab: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + /* ------------------------------------------------------ + LEFT PANEL (FILE PANEL) + /* ------------------------------------------------------ */ + leftPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor, - input_RunTab: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor - }), + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, - box_Instance: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, - button_atAddress: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), + icon_Color_Menu: appProperties.icon_Color, + icon_HoverColor_Menu: appProperties.icon_HoverColor, - button_Create: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - button_Instance_Call: app_properties.uiElements.button({ - BackgroundColor: app_properties.callButton_BackgroundColor, - BorderColor: app_properties.callButton_BorderColor, - Color: app_properties.callButton_TextColor - }), - - button_Instance_Transact: app_properties.uiElements.button({ - BackgroundColor: app_properties.transactButton_BackgroundColor, - BorderColor: app_properties.transactButton_BorderColor, - Color: app_properties.transactButton_TextColor - }), - - button_Instance_TransactPayable: app_properties.uiElements.button({ - BackgroundColor: app_properties.transactPayableButton_BackgroundColor, - BorderColor: app_properties.transactPayableButton_BorderColor, - Color: app_properties.transactPayableButton_TextColor - }), - - icon_Color_Instance_CopyToClipboard: app_properties.icon_Color, - icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor, + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor }, - /* :::::::::::::: - SETTINGS TAB - ::::::::::::::: */ - settingsTab: { + /* ------------------------------------------------------ + EDITOR + /* ------------------------------------------------------ */ + editor: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_Editor: appProperties.light_BackgroundColor, + backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor, + backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor, - box_SolidityVersionInfo: app_properties.uiElements.dottedBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_Editor: '', - dropdown_SelectCompiler: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + icon_Color_Editor: appProperties.icon_Color, + icon_HoverColor_Editor: appProperties.icon_HoverColor }, - /* :::::::::::::: - DEBUGGER TAB - ::::::::::::::: */ - debuggerTab: { - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - box_Debugger: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor + /* ------------------------------------------------------ + 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.warningText_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 }), - button_Debugger: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), - - button_Debugger_icon_Color: app_properties.icon_Color, - button_Debugger_icon_HoverColor: app_properties.icon_HoverColor, - - dropdown_Debugger: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor + dropdown_Filter_MenuBar: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor }), - input_Debugger: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor + button_Log_Debug: appProperties.uiElements.button({ + BackgroundColor: appProperties.warningButton_BackgroundColor, + BorderColor: appProperties.warningButton_BorderColor, + Color: appProperties.warningButton_TextColor }), - debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor - - }, - - /* :::::::::::::: - ANALYSIS TAB - ::::::::::::::: */ - analysisTab: { - - button_Run_AnalysisTab: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - box_AnalysisContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor, - }), + button_Log_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }) }, - /* :::::::::::::: - SUPPORT TAB - ::::::::::::::: */ - supportTab: { - - box_IframeContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), - - box_SupportInfo: app_properties.uiElements.dottedBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_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 { - colors: css_properties.colors, - app_properties: app_properties, - borders: css_properties.borders, - leftPanel: remix_properties.leftPanel, - editor: remix_properties.editor, - terminal: remix_properties.terminal, - rightPanel: remix_properties.rightPanel, - remix: remix_properties.remix + colors: cssProperties.colors, + appProperties: appProperties, + borders: cssProperties.borders, + leftPanel: remixProperties.leftPanel, + editor: remixProperties.editor, + terminal: remixProperties.terminal, + rightPanel: remixProperties.rightPanel, + remix: remixProperties.remix } }