From 846414cd4380d20e7ddee668f5992ac5955c1246 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 22 Nov 2017 13:36:58 +0100 Subject: [PATCH] move style guide to remx-lib --- remix-debugger/src/ui/styles/style-guide.js | 632 -------------------- 1 file changed, 632 deletions(-) delete mode 100644 remix-debugger/src/ui/styles/style-guide.js diff --git a/remix-debugger/src/ui/styles/style-guide.js b/remix-debugger/src/ui/styles/style-guide.js deleted file mode 100644 index 7927aaaa72..0000000000 --- a/remix-debugger/src/ui/styles/style-guide.js +++ /dev/null @@ -1,632 +0,0 @@ -// var csjs = require('csjs-inject') - -module.exports = styleGuide - -function styleGuide () { - /* -------------------------------------------------------------------------- - - CSS PROPERTIES - - -------------------------------------------------------------------------- */ - var cssProperties = { - /* ------------------------------------------------------ - COLORS - ------------------------------------------------------ */ - 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 - strongRed: 'hsla(0, 100%, 71%, 1)', - 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)', - lightViolet: 'hsla(240, 64%, 68%, .5)' - }, - - /* ------------------------------------------------------ - FONTS - ------------------------------------------------------ */ - fonts: { - font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif' - }, - - /* ------------------------------------------------------ - BORDERS - ------------------------------------------------------ */ - borders: { - primary_borderRadius: '3px', - secondary_borderRadius: '5px' - } - } - - /* -------------------------------------------------------------------------- - - APP PROPERTIES - - -------------------------------------------------------------------------- */ - - var appProperties = { - /* ------------------------------------------------------ - BACKGROUND COLORS - ------------------------------------------------------ */ - primary_BackgroundColor: cssProperties.colors.white, - secondary_BackgroundColor: cssProperties.colors.backgroundBlue, - dark_BackgroundColor: cssProperties.colors.veryLightGrey, - light_BackgroundColor: cssProperties.colors.white, - debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, - /* ------------------------------------------------------ - 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.violet, - 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-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 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 - - }, - - /* ------------------------------------------------------ - 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.debuggingMode_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.infoButton_BackgroundColor, - BorderColor: appProperties.infoButton_BorderColor, - Color: appProperties.infoButton_TextColor - }), - - button_Log_Details: appProperties.uiElements.button({ - BackgroundColor: appProperties.secondaryButton_BackgroundColor, - BorderColor: appProperties.secondaryButton_BorderColor, - Color: appProperties.secondaryButton_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.transactButton_BackgroundColor, - BorderColor: appProperties.transactButton_BorderColor, - Color: appProperties.transactButton_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: cssProperties.colors, - appProperties: appProperties, - borders: cssProperties.borders, - leftPanel: remixProperties.leftPanel, - editor: remixProperties.editor, - terminal: remixProperties.terminal, - rightPanel: remixProperties.rightPanel, - remix: remixProperties.remix - } -}