From 74c7ed8f1c38e2dec117b4c0bbee748b646af933 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 25 Oct 2017 14:58:45 +0200 Subject: [PATCH 01/16] update style-guide for Metropolis theme --- .gitignore | 1 + remix-lib/src/ui/style-guide.js | 108 +++++++++++++++++++++++--------- 2 files changed, 78 insertions(+), 31 deletions(-) diff --git a/.gitignore b/.gitignore index 07b9a5fc42..35bd458f88 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ test-browser/reports/* babelify-src docs/_build package-lock.json +.DS_Store \ No newline at end of file diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 61c2c16faa..7bbe7b2e17 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -15,30 +15,47 @@ function styleGuide () { 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)', + white: 'hsla(198, 100%, 97%, 1)', + black: 'hsla(240, 100%, 6%, 1)', + // BLUE - blue: 'hsla(229, 75%, 87%, 1)', - lightBlue: 'hsla(229, 75%, 87%, .5)', - backgroundBlue: 'hsla(229, 100%, 97%, 1)', + blue: 'hsla(233, 91%, 36%, 1)', + lightBlue: 'hsla(202, 91%, 75%, 1)', + blueLightTrans: 'hsla(202, 91%, 75%, .4)', + backgroundBlue: 'hsla(240, 100%, 21%, 1)', + blueBlack: 'hsla(205, 13%, 18%, 1)', + // erase blueBlack ?? + brightBlue: 'hsla(233, 91%, 58%, 1)', + blueGreyEve: 'hsla(213, 64%, 65%, 1)', + bluePruneEve: 'hsla(232, 30%, 20%, 1)', + blueBerrySmog: 'hsla(286, 15%, 22%, 1)', + blueBlur: 'hsla(232, 30%, 20%, 0.7)', + blueMascara: 'hsla(187, 100%, 51%, 1)', + blueMorningGlory: 'hsla(213, 74%, 80%, 1)', + blueFairyDust: 'hsla(181, 83%, 86%, 1)', + // GREY grey: 'hsla(0, 0%, 40%, 1)', + blueGrey: 'hsla(206, 24%, 58%, .8)', + greyBlueNight: 'hsla(215, 55%, 18%, 1)', + greyBlueLight: 'hsla(213, 15%, 58%, 1)', + greyBlueMed: 'hsla(215, 55%, 28%, 1)', lightGrey: 'hsla(0, 0%, 40%, .5)', veryLightGrey: 'hsla(0, 0%, 40%, .2)', + desatGrey: 'hsla(173, 17%, 79%, 1)', // RED strongRed: 'hsla(0, 100%, 71%, 1)', red: 'hsla(0, 82%, 82%, 1)', - lightRed: 'hsla(0, 82%, 82%, .5)', + lightRed: 'hsla(0, 82%, 82%, .8)', // 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)', + lightPink: 'hsla(286, 71%, 88%, 1)', // YELLOW - orange: 'hsla(44, 100%, 50%, 1)', - lightOrange: 'hsla(44, 100%, 50%, .5)', + orange: 'hsla(39, 87%, 50%, 1)', + lightOrange: 'hsla(39, 87%, 50%, .5)', // VIOLET violet: 'hsla(240, 64%, 68%, 1)', lightViolet: 'hsla(240, 64%, 68%, .5)' @@ -70,29 +87,39 @@ function styleGuide () { /* ------------------------------------------------------ BACKGROUND COLORS ------------------------------------------------------ */ - primary_BackgroundColor: cssProperties.colors.white, + primary_BackgroundColor: cssProperties.colors.black, secondary_BackgroundColor: cssProperties.colors.backgroundBlue, - dark_BackgroundColor: cssProperties.colors.veryLightGrey, + tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, + quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, + quinary_BackgroundColor: cssProperties.colors.greyBlueMed, + senary_BackgroundColor: cssProperties.colors.blueBerrySmog, + seventh_BackgroundColor: cssProperties.colors.blueBlur, + dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, /* ------------------------------------------------------ RESIZING ******************************************************** */ - ghostBar: cssProperties.colors.lightBlue, - draggingBar: cssProperties.colors.lightBlue, + ghostBar: cssProperties.colors.blueLightTrans, + draggingBar: cssProperties.colors.blueGreyEve, /* ------------------------------------------------------ TEXT COLORS ******************************************************** */ - mainText_Color: cssProperties.colors.black, - supportText_Color: cssProperties.colors.grey, + mainText_Color: cssProperties.colors.white, + supportText_Color: cssProperties.colors.lightBlue, + supportText_OppositeColor: cssProperties.colors.lightBlue, + // remove supportText_Opposite ??? + sub_supportText_Color: cssProperties.colors.greyBlueLight, + errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, infoText_Color: cssProperties.colors.violet, /* ------------------------------------------------------ ICONS ******************************************************** */ - icon_Color: cssProperties.colors.black, + icon_Color: cssProperties.colors.white, + icon_AltColor: cssProperties.colors.black, icon_HoverColor: cssProperties.colors.orange, /* ------------------------------------------------------ @@ -109,8 +136,8 @@ function styleGuide () { danger_BorderColor: cssProperties.colors.red, // Warning - warning_TextColor: cssProperties.colors.black, - warning_BackgroundColor: cssProperties.colors.lightOrange, + warning_TextColor: cssProperties.colors.desatGrey, + warning_BackgroundColor: cssProperties.colors.blue, warning_BorderColor: cssProperties.colors.orange, // Tooltip @@ -123,6 +150,7 @@ function styleGuide () { ******************************************************** */ dropdown_TextColor: cssProperties.colors.black, dropdown_BackgroundColor: cssProperties.colors.white, + dropdown_SecondaryBackgroundColor: cssProperties.colors.blueMorningGlory, dropdown_BorderColor: cssProperties.colors.veryLightGrey, /* ------------------------------------------------------ @@ -136,8 +164,8 @@ function styleGuide () { SOLID BORDER BOX ******************************************************** */ solidBorderBox_TextColor: cssProperties.colors.black, - solidBorderBox_BackgroundColor: cssProperties.colors.white, - solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey, + solidBorderBox_BackgroundColor: cssProperties.colors.blueGreyEve, + solidBorderBox_BorderColor: cssProperties.colors.backgroundBlue, /* ------------------------------------------------------ BUTTONS @@ -154,9 +182,15 @@ function styleGuide () { SECONDARY .................. */ secondaryButton_TextColor: cssProperties.colors.black, - secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey, + secondaryButton_BackgroundColor: cssProperties.colors.lightBlue, secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + Teriary + .................. */ + teriaryButton_TextColor: cssProperties.colors.black, + teriaryButton_BackgroundColor: cssProperties.colors.greyBlueMed, + teriaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. SUCCESS .................. */ @@ -181,8 +215,8 @@ function styleGuide () { /* ................. INFO .................. */ - infoButton_TextColor: cssProperties.colors.violet, - infoButton_BackgroundColor: cssProperties.colors.white, + infoButton_TextColor: cssProperties.colors.black, + infoButton_BackgroundColor: cssProperties.colors.lightPink, infoButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. @@ -196,7 +230,7 @@ function styleGuide () { // TRANSACTION transactButton_TextColor: cssProperties.colors.black, - transactButton_BackgroundColor: cssProperties.colors.lightRed, + transactButton_BackgroundColor: cssProperties.colors.orange, transactButton_BorderColor: cssProperties.colors.lightRed, // PAYABLE TRANSACTION @@ -316,10 +350,11 @@ function styleGuide () { /* ------------------------------------------------------ */ leftPanel: { backgroundColor_Panel: appProperties.primary_BackgroundColor, - backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor, + backgroundColor_FileExplorer: appProperties.tertiary_BackgroundColor, text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, + text_Teriary: appProperties.sub_supportText_Color, bar_Ghost: appProperties.ghostBar, bar_Dragging: appProperties.draggingBar, @@ -343,8 +378,9 @@ function styleGuide () { backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor, backgroundColor_DebuggerMode: appProperties.debuggingMode_BackgroundColor, - text_Primary: appProperties.mainText_Color, + text_Primary: appProperties.supportText_OppositeColor, text_Secondary: appProperties.supportText_Color, + text_Teriary: appProperties.sub_supportText_Color, text_Editor: '', icon_Color_Editor: appProperties.icon_Color, @@ -357,7 +393,8 @@ function styleGuide () { /* ------------------------------------------------------ */ terminal: { backgroundColor_Menu: appProperties.secondary_BackgroundColor, - backgroundColor_Terminal: appProperties.dark_BackgroundColor, + backgroundColor_Terminal: appProperties.senary_BackgroundColor, + backgroundColor_TerminalCLI: appProperties.seventh_BackgroundColor, text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, @@ -406,7 +443,7 @@ function styleGuide () { /* ------------------------------------------------------ */ rightPanel: { backgroundColor_Panel: appProperties.primary_BackgroundColor, - backgroundColor_Tab: appProperties.secondary_BackgroundColor, + backgroundColor_Tab: appProperties.quinary_BackgroundColor, BackgroundColor_Pre: appProperties.light_BackgroundColor, text_Primary: appProperties.mainText_Color, @@ -483,6 +520,11 @@ function styleGuide () { BorderColor: appProperties.dropdown_BorderColor, Color: appProperties.dropdown_TextColor }), + titlebox_RunTab: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_SecondaryBackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), input_RunTab: appProperties.uiElements.inputField({ BackgroundColor: appProperties.input_BackgroundColor, @@ -524,7 +566,11 @@ function styleGuide () { BackgroundColor: appProperties.transactPayableButton_BackgroundColor, BorderColor: appProperties.transactPayableButton_BorderColor, Color: appProperties.transactPayableButton_TextColor - }) + }), + + icon_Color_Instance_CopyToClipboard: appProperties.icon_Color, + icon_AltColor_Instance_CopyToClipboard: appProperties.icon_AltColor, + icon_HoverColor_Instance_CopyToClipboard: appProperties.icon_HoverColor }, @@ -560,7 +606,7 @@ function styleGuide () { }), button_Debugger: appProperties.uiElements.button({ - BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BackgroundColor: appProperties.teriaryButton_BackgroundColor, BorderColor: appProperties.secondaryButton_BorderColor, Color: appProperties.secondaryButton_TextColor }), From 9c417a955301cd0f9a30a4fe649f6e5e45d247cd Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 27 Nov 2017 12:48:17 +0100 Subject: [PATCH 02/16] remix_theme style-guide update --- remix-lib/src/ui/style-guide.js | 83 +++++++++++++++++++++++---------- 1 file changed, 58 insertions(+), 25 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 7bbe7b2e17..c293bf6098 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -33,6 +33,9 @@ function styleGuide () { blueMascara: 'hsla(187, 100%, 51%, 1)', blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)', + blueMonday: 'hsla(213, 100%, 16%, 1)', + + greenZing: 'hsla(148, 79%, 47%, 1)', // GREY grey: 'hsla(0, 0%, 40%, 1)', @@ -93,7 +96,7 @@ function styleGuide () { quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, quinary_BackgroundColor: cssProperties.colors.greyBlueMed, senary_BackgroundColor: cssProperties.colors.blueBerrySmog, - seventh_BackgroundColor: cssProperties.colors.blueBlur, + seventh_BackgroundColor: cssProperties.colors.blueMonday, dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, @@ -136,9 +139,9 @@ function styleGuide () { danger_BorderColor: cssProperties.colors.red, // Warning - warning_TextColor: cssProperties.colors.desatGrey, - warning_BackgroundColor: cssProperties.colors.blue, - warning_BorderColor: cssProperties.colors.orange, + warning_TextColor: cssProperties.colors.black, + warning_BackgroundColor: cssProperties.colors.orange, + // warning_BorderColor: cssProperties.colors.orange, // Tooltip tooltip_Color: cssProperties.colors.white, @@ -163,9 +166,15 @@ function styleGuide () { /* ------------------------------------------------------ SOLID BORDER BOX ******************************************************** */ - solidBorderBox_TextColor: cssProperties.colors.black, - solidBorderBox_BackgroundColor: cssProperties.colors.blueGreyEve, - solidBorderBox_BorderColor: cssProperties.colors.backgroundBlue, + solidBorderBox_TextColor: cssProperties.colors.white, + solidBorderBox_BackgroundColor: cssProperties.colors.black, + solidBorderBox_BorderColor: cssProperties.colors.lightBlue, + + /* ------------------------------------------------------ + SOLID BOX + ******************************************************** */ + solidBox_TextColor: cssProperties.colors.white, + solidBox_BackgroundColor: cssProperties.colors.black, /* ------------------------------------------------------ BUTTONS @@ -192,6 +201,15 @@ function styleGuide () { teriaryButton_BackgroundColor: cssProperties.colors.greyBlueMed, teriaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. + + /* ................. + Quaternary + .................. */ + quaternaryButton_TextColor: cssProperties.colors.black, + quaternaryButton_BackgroundColor: cssProperties.colors.blueMascara, + quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + SUCCESS .................. */ successButton_TextColor: cssProperties.colors.white, @@ -230,7 +248,7 @@ function styleGuide () { // TRANSACTION transactButton_TextColor: cssProperties.colors.black, - transactButton_BackgroundColor: cssProperties.colors.orange, + transactButton_BackgroundColor: cssProperties.colors.blueFairyDust, transactButton_BorderColor: cssProperties.colors.lightRed, // PAYABLE TRANSACTION @@ -256,6 +274,17 @@ function styleGuide () { width : 100%; `, + solidBox: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + color : ${opts.Color}; + 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}; @@ -378,7 +407,7 @@ function styleGuide () { backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor, backgroundColor_DebuggerMode: appProperties.debuggingMode_BackgroundColor, - text_Primary: appProperties.supportText_OppositeColor, + text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, text_Teriary: appProperties.sub_supportText_Color, text_Editor: '', @@ -393,7 +422,7 @@ function styleGuide () { /* ------------------------------------------------------ */ terminal: { backgroundColor_Menu: appProperties.secondary_BackgroundColor, - backgroundColor_Terminal: appProperties.senary_BackgroundColor, + backgroundColor_Terminal: appProperties.seventh_BackgroundColor, backgroundColor_TerminalCLI: appProperties.seventh_BackgroundColor, text_Primary: appProperties.mainText_Color, @@ -425,15 +454,15 @@ function styleGuide () { }), button_Log_Debug: appProperties.uiElements.button({ - BackgroundColor: appProperties.infoButton_BackgroundColor, + BackgroundColor: appProperties.quaternaryButton_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 + BackgroundColor: appProperties.quaternaryButton_BackgroundColor, + BorderColor: appProperties.quaternaryButton_BorderColor, + Color: appProperties.quaternaryButton_TextColor }) }, @@ -442,9 +471,9 @@ function styleGuide () { RIGHT PANEL /* ------------------------------------------------------ */ rightPanel: { - backgroundColor_Panel: appProperties.primary_BackgroundColor, - backgroundColor_Tab: appProperties.quinary_BackgroundColor, - BackgroundColor_Pre: appProperties.light_BackgroundColor, + backgroundColor_Panel: appProperties.seventh_BackgroundColor, + backgroundColor_Tab: appProperties.seventh_BackgroundColor, + BackgroundColor_Pre: appProperties.dark_BackgroundColor, text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, @@ -497,7 +526,7 @@ function styleGuide () { box_CompileContainer: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, Color: appProperties.solidBorderBox_TextColor }), @@ -510,9 +539,8 @@ function styleGuide () { ::::::::::::::: */ runTab: { box_RunTab: appProperties.uiElements.solidBorderBox({ - BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, - Color: appProperties.solidBorderBox_TextColor + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor }), dropdown_RunTab: appProperties.uiElements.dropdown({ @@ -532,10 +560,15 @@ function styleGuide () { Color: appProperties.input_TextColor }), - box_Instance: appProperties.uiElements.solidBorderBox({ - BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, - Color: appProperties.solidBorderBox_TextColor + box_Instance: appProperties.uiElements.solidBox({ + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor + }), + + borderBox_Instance: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor, + BorderColor: appProperties.solidBorderBox_BorderColor }), button_atAddress: appProperties.uiElements.button({ From 45818039084ac8c42e81132cc963a34827cb1afa Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 27 Nov 2017 17:13:56 +0100 Subject: [PATCH 03/16] metropolis update --- remix-lib/src/ui/style-guide.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index c293bf6098..ba2c64bda2 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -477,6 +477,7 @@ function styleGuide () { text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, + text_Teriary: appProperties.sub_supportText_Color, bar_Ghost: appProperties.ghostBar, bar_Dragging: appProperties.draggingBar, @@ -525,7 +526,7 @@ function styleGuide () { }), box_CompileContainer: appProperties.uiElements.solidBorderBox({ - BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BackgroundColor: appProperties.quaternary_BackgroundColor, BorderColor: appProperties.solidBorderBox_BackgroundColor, Color: appProperties.solidBorderBox_TextColor }), From a4100040ed68ada9ce6fcc61d2150786fc2bdf00 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 28 Nov 2017 13:48:09 +0100 Subject: [PATCH 04/16] update of metropolis theme --- .DS_Store | Bin 8196 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index e2a0bb1ce484d8767448a6c2e3e552f4dd3165be..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHM&2G~`5T0#Q>hwnh3DF*XLE=!Vv`~6LNFi+xm7qcd!2wWfCnhmQZiH;7zZ*9z9A!!TeNFbo(53L zem>YJtQ%TSl$MVUR5AsCuAo~A+VZDAw9OsR4Xr0iqX!}s6k0)rPBDbe9E5`7enZ<& zlvZ#Oa%A|?BMY6O2%UHcTbh$-C~a!PfMKA>0O#%%TBR=el;raF`?z=OrxXdCJGX;v zmqLoDPhJl5wFDE=F&$lw5lcDDJjO}j+o2PnVqBd8A7n=oA9JWHu#fTQ0UPIRfBeqY z9mdD{tHn3>IPl}7UjHtprYkd7X02+~sxDfuTfJ!5N}Oa6H=X`VdF6LJSGS)YG+^=2Vio(S4L$9AQfAzu-JJGNi4Z=<={XB7!9joyzxd`3VJp`V6yRb5}yU(m`Ba?>oVKY@2b-Z?pq&>sZMR5oFlGqrEsX4AsX{E)D!nZr zd2!RoIgRt^6!tx!iW`C#IgOd6N3@HPc4&`Uw3CYgaSAIH=OX69+nRk3v6T|U(<_@B zA^Hq*K^}z;qS?o+B1AVpbY3AQu#v%C!?AEM$|345>~90bEFP*+(GIh7<}IJ`u#od0 znJmG9nGCK%@Z`d8gjM3h-p~2xSW`Ij{>P~>Vi+i4U|RJpbN;_``S<@4 zr0FsY7zX|o21I4MwcSKC=f5WNfpM;Fqa2{Hu-!yy2|*>(acG&2Ltp&E5N#W#jA>{+ TQ5roE^C3XeU@F7FA7$Vd=WSkw From 912b0ac7af1ee876c1f3e7f83b46703786e47c66 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 4 Dec 2017 17:09:11 +0100 Subject: [PATCH 05/16] update to styleguide --- remix-debugger/package.json | 1 - remix-lib/src/ui/style-guide.js | 54 +++++++++++++++++++++++++-------- 2 files changed, 42 insertions(+), 13 deletions(-) diff --git a/remix-debugger/package.json b/remix-debugger/package.json index 8d0eff8025..40b86e56ee 100644 --- a/remix-debugger/package.json +++ b/remix-debugger/package.json @@ -118,4 +118,3 @@ ] } } - diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index ba2c64bda2..6a1b8f1cf2 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -3,6 +3,8 @@ module.exports = styleGuide function styleGuide () { + + /* -------------------------------------------------------------------------- CSS PROPERTIES @@ -17,14 +19,13 @@ function styleGuide () { transparent: 'transparent', white: 'hsla(198, 100%, 97%, 1)', black: 'hsla(240, 100%, 6%, 1)', + opacityBlack: 'hsla(240, 100%, 6%, .7)', // BLUE blue: 'hsla(233, 91%, 36%, 1)', lightBlue: 'hsla(202, 91%, 75%, 1)', blueLightTrans: 'hsla(202, 91%, 75%, .4)', backgroundBlue: 'hsla(240, 100%, 21%, 1)', - blueBlack: 'hsla(205, 13%, 18%, 1)', - // erase blueBlack ?? brightBlue: 'hsla(233, 91%, 58%, 1)', blueGreyEve: 'hsla(213, 64%, 65%, 1)', bluePruneEve: 'hsla(232, 30%, 20%, 1)', @@ -87,6 +88,9 @@ function styleGuide () { -------------------------------------------------------------------------- */ var appProperties = { + + aceTheme: 'tomorrow_night_blue', + /* ------------------------------------------------------ BACKGROUND COLORS ------------------------------------------------------ */ @@ -94,8 +98,7 @@ function styleGuide () { secondary_BackgroundColor: cssProperties.colors.backgroundBlue, tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, - quinary_BackgroundColor: cssProperties.colors.greyBlueMed, - senary_BackgroundColor: cssProperties.colors.blueBerrySmog, + fifth_BackgroundColor: cssProperties.colors.bluePruneEve, seventh_BackgroundColor: cssProperties.colors.blueMonday, dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, @@ -111,10 +114,10 @@ function styleGuide () { ******************************************************** */ mainText_Color: cssProperties.colors.white, supportText_Color: cssProperties.colors.lightBlue, - supportText_OppositeColor: cssProperties.colors.lightBlue, - // remove supportText_Opposite ??? sub_supportText_Color: cssProperties.colors.greyBlueLight, - + specialText_Color: cssProperties.colors.greenZing, + brightText_Color: cssProperties.colors.blueMascara, + additionalText_Color: cssProperties.colors.desatGrey, errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, infoText_Color: cssProperties.colors.violet, @@ -210,6 +213,23 @@ function styleGuide () { quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. + /* ................. + Fifth + .................. */ + fifthButton_TextColor: cssProperties.colors.black, + fifthButton_BackgroundColor: cssProperties.colors.blueFairyDust, + fifthButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + /* ................. + Sixth + .................. */ + sixthButton_TextColor: cssProperties.colors.black, + sixthButton_BackgroundColor: cssProperties.colors.greenZing, + sixthButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + SUCCESS .................. */ successButton_TextColor: cssProperties.colors.white, @@ -251,6 +271,11 @@ function styleGuide () { transactButton_BackgroundColor: cssProperties.colors.blueFairyDust, transactButton_BorderColor: cssProperties.colors.lightRed, + // CONSTANT + constantButton_TextColor: cssProperties.colors.black, + constantButton_BackgroundColor: cssProperties.colors.greenZing, + constantButton_BorderColor: cssProperties.colors.greenZing, + // PAYABLE TRANSACTION transactPayableButton_TextColor: cssProperties.colors.black, transactPayableButton_BackgroundColor: cssProperties.colors.red, @@ -358,9 +383,11 @@ function styleGuide () { REMIX GENERAL /* ------------------------------------------------------ */ remix: { - modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor, - modalDialog_text_Primary: appProperties.mainText_Color, + modalDialog_BackgroundColor_Primary: appProperties.fifth_BackgroundColor, + modalDialog_text_Primary: appProperties.additionalText_Color, modalDialog_text_Secondary: appProperties.supportText_Color, + modalDialog_text_Link: appProperties.brightText_Color, + modalDialog_text_Em: appProperties.specialText_Color, modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor, modalDialog_Header_Footer_Color: appProperties.mainText_Color, modalDialog_BoxDottedBorder_BackgroundColor: appProperties.solidBorderBox_BackgroundColor, @@ -478,6 +505,7 @@ function styleGuide () { text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, text_Teriary: appProperties.sub_supportText_Color, + text_link: appProperties.brightText_Color, bar_Ghost: appProperties.ghostBar, bar_Dragging: appProperties.draggingBar, @@ -577,19 +605,21 @@ function styleGuide () { 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_Constant: appProperties.uiElements.button({ + BackgroundColor: appProperties.constantButton_BackgroundColor, + BorderColor: appProperties.constantButton_BorderColor, + Color: appProperties.constantButton_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, From f5a77776ba32906734f16f09addccd2ccc7f9456 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 5 Dec 2017 11:03:24 +0100 Subject: [PATCH 06/16] update styleguide --- remix-lib/src/ui/style-guide.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 6a1b8f1cf2..b17bd4ccc4 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -117,6 +117,7 @@ function styleGuide () { sub_supportText_Color: cssProperties.colors.greyBlueLight, specialText_Color: cssProperties.colors.greenZing, brightText_Color: cssProperties.colors.blueMascara, + oppositeText_Color: cssProperties.colors.black, additionalText_Color: cssProperties.colors.desatGrey, errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, @@ -459,6 +460,7 @@ function styleGuide () { text_ErrorLog: appProperties.errorText_Color, text_Title_TransactionLog: appProperties.infoText_Color, text_Regular_TransactionLog: appProperties.supportText_Color, + text_Button: appProperties.oppositeText_Color, icon_Color_TogglePanel: appProperties.icon_Color, icon_HoverColor_TogglePanel: appProperties.icon_HoverColor, From cc34f141df0c777d10fee181688027f95cee52c8 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 5 Dec 2017 18:39:20 +0100 Subject: [PATCH 07/16] update to style-guide --- remix-lib/src/ui/style-guide.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index b17bd4ccc4..a4b1575f8c 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -667,7 +667,7 @@ function styleGuide () { box_Debugger: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, Color: appProperties.solidBorderBox_TextColor }), @@ -708,7 +708,7 @@ function styleGuide () { box_AnalysisContainer: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, Color: appProperties.solidBorderBox_TextColor }) }, @@ -719,7 +719,7 @@ function styleGuide () { supportTab: { box_IframeContainer: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor, - BorderColor: appProperties.solidBorderBox_BorderColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, Color: appProperties.solidBorderBox_TextColor }), From 4ee3b2a9bbabdbc094247bd0d8f8154e288ff5cb Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 6 Dec 2017 14:15:13 +0100 Subject: [PATCH 08/16] adding multiple style-guide --- remix-lib/src/ui/style-guide_master.js | 635 ++++++++++++++++++ remix-lib/src/ui/style-guide_metropolis.js | 747 +++++++++++++++++++++ 2 files changed, 1382 insertions(+) create mode 100644 remix-lib/src/ui/style-guide_master.js create mode 100644 remix-lib/src/ui/style-guide_metropolis.js diff --git a/remix-lib/src/ui/style-guide_master.js b/remix-lib/src/ui/style-guide_master.js new file mode 100644 index 0000000000..61c2c16faa --- /dev/null +++ b/remix-lib/src/ui/style-guide_master.js @@ -0,0 +1,635 @@ +// 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, + + // Tooltip + tooltip_Color: cssProperties.colors.white, + tooltip_BackgroundColor: cssProperties.colors.grey, + tooltip_BorderColor: cssProperties.colors.grey, + + /* ------------------------------------------------------ + 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, + + tooltip_CopyToClipboard_BackgroundColor: appProperties.tooltip_BackgroundColor, + tooltip_CopyToClipboard_Color: appProperties.tooltip_Color, + + icon_Color_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_CopyToClipboard: 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, + + 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 + }) + + }, + + /* :::::::::::::: + 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 + } +} diff --git a/remix-lib/src/ui/style-guide_metropolis.js b/remix-lib/src/ui/style-guide_metropolis.js new file mode 100644 index 0000000000..a4b1575f8c --- /dev/null +++ b/remix-lib/src/ui/style-guide_metropolis.js @@ -0,0 +1,747 @@ +// 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: 'hsla(198, 100%, 97%, 1)', + black: 'hsla(240, 100%, 6%, 1)', + opacityBlack: 'hsla(240, 100%, 6%, .7)', + + // BLUE + blue: 'hsla(233, 91%, 36%, 1)', + lightBlue: 'hsla(202, 91%, 75%, 1)', + blueLightTrans: 'hsla(202, 91%, 75%, .4)', + backgroundBlue: 'hsla(240, 100%, 21%, 1)', + brightBlue: 'hsla(233, 91%, 58%, 1)', + blueGreyEve: 'hsla(213, 64%, 65%, 1)', + bluePruneEve: 'hsla(232, 30%, 20%, 1)', + blueBerrySmog: 'hsla(286, 15%, 22%, 1)', + blueBlur: 'hsla(232, 30%, 20%, 0.7)', + blueMascara: 'hsla(187, 100%, 51%, 1)', + blueMorningGlory: 'hsla(213, 74%, 80%, 1)', + blueFairyDust: 'hsla(181, 83%, 86%, 1)', + blueMonday: 'hsla(213, 100%, 16%, 1)', + + greenZing: 'hsla(148, 79%, 47%, 1)', + + // GREY + grey: 'hsla(0, 0%, 40%, 1)', + blueGrey: 'hsla(206, 24%, 58%, .8)', + greyBlueNight: 'hsla(215, 55%, 18%, 1)', + greyBlueLight: 'hsla(213, 15%, 58%, 1)', + greyBlueMed: 'hsla(215, 55%, 28%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + desatGrey: 'hsla(173, 17%, 79%, 1)', + // RED + strongRed: 'hsla(0, 100%, 71%, 1)', + red: 'hsla(0, 82%, 82%, 1)', + lightRed: 'hsla(0, 82%, 82%, .8)', + // GREEN + green: 'hsla(141, 75%, 84%, 1)', + lightGreen: 'hsla(141, 75%, 84%, .5)', + // PINK + pink: 'hsla(300, 69%, 76%, 1)', + lightPink: 'hsla(286, 71%, 88%, 1)', + // YELLOW + orange: 'hsla(39, 87%, 50%, 1)', + lightOrange: 'hsla(39, 87%, 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 = { + + aceTheme: 'tomorrow_night_blue', + + /* ------------------------------------------------------ + BACKGROUND COLORS + ------------------------------------------------------ */ + primary_BackgroundColor: cssProperties.colors.black, + secondary_BackgroundColor: cssProperties.colors.backgroundBlue, + tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, + quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, + fifth_BackgroundColor: cssProperties.colors.bluePruneEve, + seventh_BackgroundColor: cssProperties.colors.blueMonday, + dark_BackgroundColor: cssProperties.colors.black, + light_BackgroundColor: cssProperties.colors.white, + debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, + /* ------------------------------------------------------ + RESIZING + ******************************************************** */ + ghostBar: cssProperties.colors.blueLightTrans, + draggingBar: cssProperties.colors.blueGreyEve, + + /* ------------------------------------------------------ + TEXT COLORS + ******************************************************** */ + mainText_Color: cssProperties.colors.white, + supportText_Color: cssProperties.colors.lightBlue, + sub_supportText_Color: cssProperties.colors.greyBlueLight, + specialText_Color: cssProperties.colors.greenZing, + brightText_Color: cssProperties.colors.blueMascara, + oppositeText_Color: cssProperties.colors.black, + additionalText_Color: cssProperties.colors.desatGrey, + errorText_Color: cssProperties.colors.strongRed, + warningText_Color: cssProperties.colors.orange, + infoText_Color: cssProperties.colors.violet, + /* ------------------------------------------------------ + ICONS + ******************************************************** */ + icon_Color: cssProperties.colors.white, + icon_AltColor: 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.orange, + // warning_BorderColor: cssProperties.colors.orange, + + // Tooltip + tooltip_Color: cssProperties.colors.white, + tooltip_BackgroundColor: cssProperties.colors.grey, + tooltip_BorderColor: cssProperties.colors.grey, + + /* ------------------------------------------------------ + DROPDOWN + ******************************************************** */ + dropdown_TextColor: cssProperties.colors.black, + dropdown_BackgroundColor: cssProperties.colors.white, + dropdown_SecondaryBackgroundColor: cssProperties.colors.blueMorningGlory, + 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.white, + solidBorderBox_BackgroundColor: cssProperties.colors.black, + solidBorderBox_BorderColor: cssProperties.colors.lightBlue, + + /* ------------------------------------------------------ + SOLID BOX + ******************************************************** */ + solidBox_TextColor: cssProperties.colors.white, + solidBox_BackgroundColor: cssProperties.colors.black, + + /* ------------------------------------------------------ + 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.lightBlue, + secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, + + /* ................. + Teriary + .................. */ + teriaryButton_TextColor: cssProperties.colors.black, + teriaryButton_BackgroundColor: cssProperties.colors.greyBlueMed, + teriaryButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + /* ................. + Quaternary + .................. */ + quaternaryButton_TextColor: cssProperties.colors.black, + quaternaryButton_BackgroundColor: cssProperties.colors.blueMascara, + quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + /* ................. + Fifth + .................. */ + fifthButton_TextColor: cssProperties.colors.black, + fifthButton_BackgroundColor: cssProperties.colors.blueFairyDust, + fifthButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + /* ................. + Sixth + .................. */ + sixthButton_TextColor: cssProperties.colors.black, + sixthButton_BackgroundColor: cssProperties.colors.greenZing, + sixthButton_BorderColor: cssProperties.colors.veryLightGrey, + /* ................. + + + SUCCESS + .................. */ + successButton_TextColor: cssProperties.colors.white, + successButton_BackgroundColor: cssProperties.colors.green, + successButton_BorderColor: cssProperties.colors.green, + + /* ................. + DANGER + .................. */ + dangerButton_TextColor: cssProperties.colors.white, + dangerButton_BackgroundColor: cssProperties.colors.red, + dangerButton_BorderColor: cssProperties.colors.red, + + /* ................. + WARNING + .................. */ + warningButton_TextColor: cssProperties.colors.white, + warningButton_BackgroundColor: cssProperties.colors.lightOrange, + warningButton_BorderColor: cssProperties.colors.lightOrange, + + /* ................. + INFO + .................. */ + infoButton_TextColor: cssProperties.colors.black, + infoButton_BackgroundColor: cssProperties.colors.lightPink, + 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.blueFairyDust, + transactButton_BorderColor: cssProperties.colors.lightRed, + + // CONSTANT + constantButton_TextColor: cssProperties.colors.black, + constantButton_BackgroundColor: cssProperties.colors.greenZing, + constantButton_BorderColor: cssProperties.colors.greenZing, + + // 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%; + `, + + solidBox: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + color : ${opts.Color}; + 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.fifth_BackgroundColor, + modalDialog_text_Primary: appProperties.additionalText_Color, + modalDialog_text_Secondary: appProperties.supportText_Color, + modalDialog_text_Link: appProperties.brightText_Color, + modalDialog_text_Em: appProperties.specialText_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, + + tooltip_CopyToClipboard_BackgroundColor: appProperties.tooltip_BackgroundColor, + tooltip_CopyToClipboard_Color: appProperties.tooltip_Color, + + icon_Color_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor + }, + + /* ------------------------------------------------------ + LEFT PANEL (FILE PANEL) + /* ------------------------------------------------------ */ + leftPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_FileExplorer: appProperties.tertiary_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_Teriary: appProperties.sub_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_Teriary: appProperties.sub_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.seventh_BackgroundColor, + backgroundColor_TerminalCLI: appProperties.seventh_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, + text_Button: appProperties.oppositeText_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, + + 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.quaternaryButton_BackgroundColor, + BorderColor: appProperties.infoButton_BorderColor, + Color: appProperties.infoButton_TextColor + }), + + button_Log_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.quaternaryButton_BackgroundColor, + BorderColor: appProperties.quaternaryButton_BorderColor, + Color: appProperties.quaternaryButton_TextColor + }) + + }, + + /* ------------------------------------------------------ + RIGHT PANEL + /* ------------------------------------------------------ */ + rightPanel: { + backgroundColor_Panel: appProperties.seventh_BackgroundColor, + backgroundColor_Tab: appProperties.seventh_BackgroundColor, + BackgroundColor_Pre: appProperties.dark_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_Teriary: appProperties.sub_supportText_Color, + text_link: appProperties.brightText_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.quaternary_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, + Color: appProperties.solidBorderBox_TextColor + }), + + icon_WarnCompilation_Color: appProperties.warning_BackgroundColor + + }, + + /* :::::::::::::: + RUN TAB + ::::::::::::::: */ + runTab: { + box_RunTab: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor + }), + + dropdown_RunTab: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + titlebox_RunTab: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_SecondaryBackgroundColor, + 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.solidBox({ + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor + }), + + borderBox_Instance: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBox_BackgroundColor, + Color: appProperties.solidBox_TextColor, + BorderColor: appProperties.solidBorderBox_BorderColor + }), + + 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_Constant: appProperties.uiElements.button({ + BackgroundColor: appProperties.constantButton_BackgroundColor, + BorderColor: appProperties.constantButton_BorderColor, + Color: appProperties.constantButton_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_AltColor_Instance_CopyToClipboard: appProperties.icon_AltColor, + 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_BackgroundColor, + Color: appProperties.solidBorderBox_TextColor + }), + + button_Debugger: appProperties.uiElements.button({ + BackgroundColor: appProperties.teriaryButton_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_BackgroundColor, + Color: appProperties.solidBorderBox_TextColor + }) + }, + + /* :::::::::::::: + SUPPORT TAB + ::::::::::::::: */ + supportTab: { + box_IframeContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BackgroundColor, + 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 + } +} From fefff68e011656f5a3c754696ee47ddfe10a7149 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 6 Dec 2017 17:24:02 +0100 Subject: [PATCH 09/16] update style-guide --- remix-lib/src/ui/style-guide.js | 99 ++++++++++++---------- remix-lib/src/ui/style-guide_master.js | 26 +++++- remix-lib/src/ui/style-guide_metropolis.js | 16 ++-- 3 files changed, 90 insertions(+), 51 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index a4b1575f8c..35b78f1bdb 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -17,16 +17,18 @@ function styleGuide () { colors: { // BASIC COLORS (B&W and transparent) transparent: 'transparent', - white: 'hsla(198, 100%, 97%, 1)', - black: 'hsla(240, 100%, 6%, 1)', - opacityBlack: 'hsla(240, 100%, 6%, .7)', + white: 'hsl(0, 0%, 100%)', + black: 'hsl(0, 0%, 0%)', + opacityBlack: 'hsla(0, 0%, 0%, .4)', // BLUE - blue: 'hsla(233, 91%, 36%, 1)', - lightBlue: 'hsla(202, 91%, 75%, 1)', + blue: 'hsla(229, 75%, 87%, 1)', + lightBlue: 'hsla(229, 75%, 87%, .5)', + backgroundBlue: 'hsla(229, 100%, 97%, 1)', + blueLightTrans: 'hsla(202, 91%, 75%, .4)', - backgroundBlue: 'hsla(240, 100%, 21%, 1)', brightBlue: 'hsla(233, 91%, 58%, 1)', + blueGreyEve: 'hsla(213, 64%, 65%, 1)', bluePruneEve: 'hsla(232, 30%, 20%, 1)', blueBerrySmog: 'hsla(286, 15%, 22%, 1)', @@ -35,31 +37,31 @@ function styleGuide () { blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)', blueMonday: 'hsla(213, 100%, 16%, 1)', - - greenZing: 'hsla(148, 79%, 47%, 1)', // GREY grey: 'hsla(0, 0%, 40%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + blueGrey: 'hsla(206, 24%, 58%, .8)', greyBlueNight: 'hsla(215, 55%, 18%, 1)', greyBlueLight: 'hsla(213, 15%, 58%, 1)', greyBlueMed: 'hsla(215, 55%, 28%, 1)', - lightGrey: 'hsla(0, 0%, 40%, .5)', - veryLightGrey: 'hsla(0, 0%, 40%, .2)', desatGrey: 'hsla(173, 17%, 79%, 1)', // RED strongRed: 'hsla(0, 100%, 71%, 1)', red: 'hsla(0, 82%, 82%, 1)', - lightRed: 'hsla(0, 82%, 82%, .8)', + lightRed: 'hsla(0, 82%, 82%, .5)', // GREEN green: 'hsla(141, 75%, 84%, 1)', lightGreen: 'hsla(141, 75%, 84%, .5)', + greenZing: 'hsla(148, 79%, 47%, 1)', // PINK pink: 'hsla(300, 69%, 76%, 1)', lightPink: 'hsla(286, 71%, 88%, 1)', - // YELLOW - orange: 'hsla(39, 87%, 50%, 1)', - lightOrange: 'hsla(39, 87%, 50%, .5)', + // ORANGE + 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)' @@ -89,17 +91,23 @@ function styleGuide () { var appProperties = { - aceTheme: 'tomorrow_night_blue', + /* ------------------------------------------------------ + ACE THEME + ------------------------------------------------------ */ + + aceTheme: '', /* ------------------------------------------------------ BACKGROUND COLORS ------------------------------------------------------ */ - primary_BackgroundColor: cssProperties.colors.black, + primary_BackgroundColor: cssProperties.colors.white, secondary_BackgroundColor: cssProperties.colors.backgroundBlue, - tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, - quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, - fifth_BackgroundColor: cssProperties.colors.bluePruneEve, - seventh_BackgroundColor: cssProperties.colors.blueMonday, + + tertiary_BackgroundColor: cssProperties.colors.backgroundBlue, + quaternary_BackgroundColor: cssProperties.colors.backgroundBlue, + fifth_BackgroundColor: cssProperties.colors.backgroundBlue, + seventh_BackgroundColor: cssProperties.colors.veryLightGrey, + dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, @@ -112,21 +120,24 @@ function styleGuide () { /* ------------------------------------------------------ TEXT COLORS ******************************************************** */ - mainText_Color: cssProperties.colors.white, - supportText_Color: cssProperties.colors.lightBlue, - sub_supportText_Color: cssProperties.colors.greyBlueLight, + mainText_Color: cssProperties.colors.black, + supportText_Color: cssProperties.colors.grey, + + sub_supportText_Color: cssProperties.colors.black, + specialText_Color: cssProperties.colors.greenZing, - brightText_Color: cssProperties.colors.blueMascara, + brightText_Color: cssProperties.colors.brightBlue, oppositeText_Color: cssProperties.colors.black, additionalText_Color: cssProperties.colors.desatGrey, + errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, infoText_Color: cssProperties.colors.violet, /* ------------------------------------------------------ ICONS ******************************************************** */ - icon_Color: cssProperties.colors.white, - icon_AltColor: cssProperties.colors.black, + icon_Color: cssProperties.colors.black, + icon_AltColor: cssProperties.colors.white, icon_HoverColor: cssProperties.colors.orange, /* ------------------------------------------------------ @@ -144,8 +155,8 @@ function styleGuide () { // Warning warning_TextColor: cssProperties.colors.black, - warning_BackgroundColor: cssProperties.colors.orange, - // warning_BorderColor: cssProperties.colors.orange, + warning_BackgroundColor: cssProperties.colors.lightOrange, + warning_BorderColor: cssProperties.colors.orange, // Tooltip tooltip_Color: cssProperties.colors.white, @@ -157,7 +168,7 @@ function styleGuide () { ******************************************************** */ dropdown_TextColor: cssProperties.colors.black, dropdown_BackgroundColor: cssProperties.colors.white, - dropdown_SecondaryBackgroundColor: cssProperties.colors.blueMorningGlory, + dropdown_SecondaryBackgroundColor: cssProperties.colors.white, dropdown_BorderColor: cssProperties.colors.veryLightGrey, /* ------------------------------------------------------ @@ -170,15 +181,15 @@ function styleGuide () { /* ------------------------------------------------------ SOLID BORDER BOX ******************************************************** */ - solidBorderBox_TextColor: cssProperties.colors.white, - solidBorderBox_BackgroundColor: cssProperties.colors.black, + solidBorderBox_TextColor: cssProperties.colors.black, + solidBorderBox_BackgroundColor: cssProperties.colors.white, solidBorderBox_BorderColor: cssProperties.colors.lightBlue, /* ------------------------------------------------------ SOLID BOX ******************************************************** */ - solidBox_TextColor: cssProperties.colors.white, - solidBox_BackgroundColor: cssProperties.colors.black, + solidBox_TextColor: cssProperties.colors.black, + solidBox_BackgroundColor: cssProperties.colors.white, /* ------------------------------------------------------ BUTTONS @@ -195,7 +206,7 @@ function styleGuide () { SECONDARY .................. */ secondaryButton_TextColor: cssProperties.colors.black, - secondaryButton_BackgroundColor: cssProperties.colors.lightBlue, + secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey, secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. @@ -210,7 +221,7 @@ function styleGuide () { Quaternary .................. */ quaternaryButton_TextColor: cssProperties.colors.black, - quaternaryButton_BackgroundColor: cssProperties.colors.blueMascara, + quaternaryButton_BackgroundColor: cssProperties.colors.white, quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. @@ -269,13 +280,13 @@ function styleGuide () { // TRANSACTION transactButton_TextColor: cssProperties.colors.black, - transactButton_BackgroundColor: cssProperties.colors.blueFairyDust, + transactButton_BackgroundColor: cssProperties.colors.lightRed, transactButton_BorderColor: cssProperties.colors.lightRed, // CONSTANT constantButton_TextColor: cssProperties.colors.black, - constantButton_BackgroundColor: cssProperties.colors.greenZing, - constantButton_BorderColor: cssProperties.colors.greenZing, + constantButton_BackgroundColor: cssProperties.colors.lightBlue, + constantButton_BorderColor: cssProperties.colors.lightBlue, // PAYABLE TRANSACTION transactPayableButton_TextColor: cssProperties.colors.black, @@ -384,8 +395,8 @@ function styleGuide () { REMIX GENERAL /* ------------------------------------------------------ */ remix: { - modalDialog_BackgroundColor_Primary: appProperties.fifth_BackgroundColor, - modalDialog_text_Primary: appProperties.additionalText_Color, + modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor, + modalDialog_text_Primary: appProperties.mainText_Color, modalDialog_text_Secondary: appProperties.supportText_Color, modalDialog_text_Link: appProperties.brightText_Color, modalDialog_text_Em: appProperties.specialText_Color, @@ -500,9 +511,9 @@ function styleGuide () { RIGHT PANEL /* ------------------------------------------------------ */ rightPanel: { - backgroundColor_Panel: appProperties.seventh_BackgroundColor, - backgroundColor_Tab: appProperties.seventh_BackgroundColor, - BackgroundColor_Pre: appProperties.dark_BackgroundColor, + backgroundColor_Panel: appProperties.fifth_BackgroundColor, + backgroundColor_Tab: appProperties.fifth_BackgroundColor, + BackgroundColor_Pre: appProperties.primary_BackgroundColor, text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, @@ -672,7 +683,7 @@ function styleGuide () { }), button_Debugger: appProperties.uiElements.button({ - BackgroundColor: appProperties.teriaryButton_BackgroundColor, + BackgroundColor: appProperties.secondaryButton_BackgroundColor, BorderColor: appProperties.secondaryButton_BorderColor, Color: appProperties.secondaryButton_TextColor }), diff --git a/remix-lib/src/ui/style-guide_master.js b/remix-lib/src/ui/style-guide_master.js index 61c2c16faa..006df53a00 100644 --- a/remix-lib/src/ui/style-guide_master.js +++ b/remix-lib/src/ui/style-guide_master.js @@ -36,7 +36,7 @@ function styleGuide () { // PINK pink: 'hsla(300, 69%, 76%, 1)', lightPink: 'hsla(300, 69%, 76%, .5)', - // YELLOW + // ORANGE orange: 'hsla(44, 100%, 50%, 1)', lightOrange: 'hsla(44, 100%, 50%, .5)', // VIOLET @@ -67,11 +67,25 @@ function styleGuide () { -------------------------------------------------------------------------- */ var appProperties = { + + /* ------------------------------------------------------ + ACE THEME + ------------------------------------------------------ */ + + aceTheme: '', + /* ------------------------------------------------------ BACKGROUND COLORS ------------------------------------------------------ */ primary_BackgroundColor: cssProperties.colors.white, secondary_BackgroundColor: cssProperties.colors.backgroundBlue, + + tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, + quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, + fifth_BackgroundColor: cssProperties.colors.bluePruneEve, + seventh_BackgroundColor: cssProperties.colors.blueMonday, + + dark_BackgroundColor: cssProperties.colors.veryLightGrey, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, @@ -86,6 +100,13 @@ function styleGuide () { ******************************************************** */ mainText_Color: cssProperties.colors.black, supportText_Color: cssProperties.colors.grey, + + sub_supportText_Color: cssProperties.colors.greyBlueLight, + specialText_Color: cssProperties.colors.greenZing, + brightText_Color: cssProperties.colors.blueMascara, + oppositeText_Color: cssProperties.colors.black, + additionalText_Color: cssProperties.colors.desatGrey, + errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, infoText_Color: cssProperties.colors.violet, @@ -93,6 +114,9 @@ function styleGuide () { ICONS ******************************************************** */ icon_Color: cssProperties.colors.black, + + icon_AltColor: cssProperties.colors.white, + icon_HoverColor: cssProperties.colors.orange, /* ------------------------------------------------------ diff --git a/remix-lib/src/ui/style-guide_metropolis.js b/remix-lib/src/ui/style-guide_metropolis.js index a4b1575f8c..47ac5d083b 100644 --- a/remix-lib/src/ui/style-guide_metropolis.js +++ b/remix-lib/src/ui/style-guide_metropolis.js @@ -24,8 +24,9 @@ function styleGuide () { // BLUE blue: 'hsla(233, 91%, 36%, 1)', lightBlue: 'hsla(202, 91%, 75%, 1)', - blueLightTrans: 'hsla(202, 91%, 75%, .4)', backgroundBlue: 'hsla(240, 100%, 21%, 1)', + + blueLightTrans: 'hsla(202, 91%, 75%, .4)', brightBlue: 'hsla(233, 91%, 58%, 1)', blueGreyEve: 'hsla(213, 64%, 65%, 1)', bluePruneEve: 'hsla(232, 30%, 20%, 1)', @@ -35,17 +36,16 @@ function styleGuide () { blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)', blueMonday: 'hsla(213, 100%, 16%, 1)', - - greenZing: 'hsla(148, 79%, 47%, 1)', // GREY grey: 'hsla(0, 0%, 40%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + blueGrey: 'hsla(206, 24%, 58%, .8)', greyBlueNight: 'hsla(215, 55%, 18%, 1)', greyBlueLight: 'hsla(213, 15%, 58%, 1)', greyBlueMed: 'hsla(215, 55%, 28%, 1)', - lightGrey: 'hsla(0, 0%, 40%, .5)', - veryLightGrey: 'hsla(0, 0%, 40%, .2)', desatGrey: 'hsla(173, 17%, 79%, 1)', // RED strongRed: 'hsla(0, 100%, 71%, 1)', @@ -54,6 +54,7 @@ function styleGuide () { // GREEN green: 'hsla(141, 75%, 84%, 1)', lightGreen: 'hsla(141, 75%, 84%, .5)', + greenZing: 'hsla(148, 79%, 47%, 1)', // PINK pink: 'hsla(300, 69%, 76%, 1)', lightPink: 'hsla(286, 71%, 88%, 1)', @@ -88,6 +89,9 @@ function styleGuide () { -------------------------------------------------------------------------- */ var appProperties = { + /* ------------------------------------------------------ + ACE THEME + ------------------------------------------------------ */ aceTheme: 'tomorrow_night_blue', @@ -145,7 +149,7 @@ function styleGuide () { // Warning warning_TextColor: cssProperties.colors.black, warning_BackgroundColor: cssProperties.colors.orange, - // warning_BorderColor: cssProperties.colors.orange, + warning_BorderColor: cssProperties.colors.orange, // Tooltip tooltip_Color: cssProperties.colors.white, From 2abfd4e0514e732a547c98ffe8d83bdf98974fb3 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 6 Dec 2017 17:24:57 +0100 Subject: [PATCH 10/16] update style-guide --- remix-lib/src/ui/style-guide_master.js | 659 ------------------------- 1 file changed, 659 deletions(-) delete mode 100644 remix-lib/src/ui/style-guide_master.js diff --git a/remix-lib/src/ui/style-guide_master.js b/remix-lib/src/ui/style-guide_master.js deleted file mode 100644 index 006df53a00..0000000000 --- a/remix-lib/src/ui/style-guide_master.js +++ /dev/null @@ -1,659 +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)', - // ORANGE - 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 = { - - /* ------------------------------------------------------ - ACE THEME - ------------------------------------------------------ */ - - aceTheme: '', - - /* ------------------------------------------------------ - BACKGROUND COLORS - ------------------------------------------------------ */ - primary_BackgroundColor: cssProperties.colors.white, - secondary_BackgroundColor: cssProperties.colors.backgroundBlue, - - tertiary_BackgroundColor: cssProperties.colors.greyBlueNight, - quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, - fifth_BackgroundColor: cssProperties.colors.bluePruneEve, - seventh_BackgroundColor: cssProperties.colors.blueMonday, - - - 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, - - sub_supportText_Color: cssProperties.colors.greyBlueLight, - specialText_Color: cssProperties.colors.greenZing, - brightText_Color: cssProperties.colors.blueMascara, - oppositeText_Color: cssProperties.colors.black, - additionalText_Color: cssProperties.colors.desatGrey, - - errorText_Color: cssProperties.colors.strongRed, - warningText_Color: cssProperties.colors.orange, - infoText_Color: cssProperties.colors.violet, - /* ------------------------------------------------------ - ICONS - ******************************************************** */ - icon_Color: cssProperties.colors.black, - - icon_AltColor: cssProperties.colors.white, - - 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, - - // Tooltip - tooltip_Color: cssProperties.colors.white, - tooltip_BackgroundColor: cssProperties.colors.grey, - tooltip_BorderColor: cssProperties.colors.grey, - - /* ------------------------------------------------------ - 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, - - tooltip_CopyToClipboard_BackgroundColor: appProperties.tooltip_BackgroundColor, - tooltip_CopyToClipboard_Color: appProperties.tooltip_Color, - - icon_Color_CopyToClipboard: appProperties.icon_Color, - icon_HoverColor_CopyToClipboard: 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, - - 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 - }) - - }, - - /* :::::::::::::: - 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 - } -} From 5eefe2f6abebc42afaacba6dc8f6e6712f85ac1b Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 7 Dec 2017 11:34:43 +0100 Subject: [PATCH 11/16] update to style-guide --- remix-lib/src/ui/style-guide.js | 27 +++------------------------ 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 35b78f1bdb..30f9ca8113 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -3,8 +3,6 @@ module.exports = styleGuide function styleGuide () { - - /* -------------------------------------------------------------------------- CSS PROPERTIES @@ -25,29 +23,12 @@ function styleGuide () { blue: 'hsla(229, 75%, 87%, 1)', lightBlue: 'hsla(229, 75%, 87%, .5)', backgroundBlue: 'hsla(229, 100%, 97%, 1)', - blueLightTrans: 'hsla(202, 91%, 75%, .4)', brightBlue: 'hsla(233, 91%, 58%, 1)', - - blueGreyEve: 'hsla(213, 64%, 65%, 1)', - bluePruneEve: 'hsla(232, 30%, 20%, 1)', - blueBerrySmog: 'hsla(286, 15%, 22%, 1)', - blueBlur: 'hsla(232, 30%, 20%, 0.7)', - blueMascara: 'hsla(187, 100%, 51%, 1)', - blueMorningGlory: 'hsla(213, 74%, 80%, 1)', - blueFairyDust: 'hsla(181, 83%, 86%, 1)', - blueMonday: 'hsla(213, 100%, 16%, 1)', - // GREY grey: 'hsla(0, 0%, 40%, 1)', lightGrey: 'hsla(0, 0%, 40%, .5)', veryLightGrey: 'hsla(0, 0%, 40%, .2)', - - blueGrey: 'hsla(206, 24%, 58%, .8)', - greyBlueNight: 'hsla(215, 55%, 18%, 1)', - greyBlueLight: 'hsla(213, 15%, 58%, 1)', - greyBlueMed: 'hsla(215, 55%, 28%, 1)', - desatGrey: 'hsla(173, 17%, 79%, 1)', // RED strongRed: 'hsla(0, 100%, 71%, 1)', red: 'hsla(0, 82%, 82%, 1)', @@ -58,7 +39,7 @@ function styleGuide () { greenZing: 'hsla(148, 79%, 47%, 1)', // PINK pink: 'hsla(300, 69%, 76%, 1)', - lightPink: 'hsla(286, 71%, 88%, 1)', + lightPink: 'hsla(300, 69%, 76%, .5)', // ORANGE orange: 'hsla(44, 100%, 50%, 1)', lightOrange: 'hsla(44, 100%, 50%, .5)', @@ -102,12 +83,10 @@ function styleGuide () { ------------------------------------------------------ */ primary_BackgroundColor: cssProperties.colors.white, secondary_BackgroundColor: cssProperties.colors.backgroundBlue, - tertiary_BackgroundColor: cssProperties.colors.backgroundBlue, quaternary_BackgroundColor: cssProperties.colors.backgroundBlue, fifth_BackgroundColor: cssProperties.colors.backgroundBlue, - seventh_BackgroundColor: cssProperties.colors.veryLightGrey, - + seventh_BackgroundColor: cssProperties.colors.veryLightGrey, dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, @@ -183,7 +162,7 @@ function styleGuide () { ******************************************************** */ solidBorderBox_TextColor: cssProperties.colors.black, solidBorderBox_BackgroundColor: cssProperties.colors.white, - solidBorderBox_BorderColor: cssProperties.colors.lightBlue, + solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey,, /* ------------------------------------------------------ SOLID BOX From d92f9bfb0f3b3fd71f1dbb19dd739b6631b88bc2 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 7 Dec 2017 11:41:03 +0100 Subject: [PATCH 12/16] update to styleguide --- remix-lib/src/ui/style-guide.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 30f9ca8113..ca401e788f 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -162,7 +162,7 @@ function styleGuide () { ******************************************************** */ solidBorderBox_TextColor: cssProperties.colors.black, solidBorderBox_BackgroundColor: cssProperties.colors.white, - solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey,, + solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey, /* ------------------------------------------------------ SOLID BOX From eb25851b1853229c37fa7e36863aa9321d9f85cc Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 Dec 2017 16:03:48 +0100 Subject: [PATCH 13/16] fix standard --- remix-lib/src/ui/style-guide.js | 6 ++---- remix-lib/src/ui/style-guide_metropolis.js | 7 ++----- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index ca401e788f..b6e022f170 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -74,7 +74,7 @@ function styleGuide () { /* ------------------------------------------------------ ACE THEME - ------------------------------------------------------ */ + ------------------------------------------------------ */ aceTheme: '', @@ -86,7 +86,7 @@ function styleGuide () { tertiary_BackgroundColor: cssProperties.colors.backgroundBlue, quaternary_BackgroundColor: cssProperties.colors.backgroundBlue, fifth_BackgroundColor: cssProperties.colors.backgroundBlue, - seventh_BackgroundColor: cssProperties.colors.veryLightGrey, + seventh_BackgroundColor: cssProperties.colors.veryLightGrey, dark_BackgroundColor: cssProperties.colors.black, light_BackgroundColor: cssProperties.colors.white, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, @@ -103,7 +103,6 @@ function styleGuide () { supportText_Color: cssProperties.colors.grey, sub_supportText_Color: cssProperties.colors.black, - specialText_Color: cssProperties.colors.greenZing, brightText_Color: cssProperties.colors.brightBlue, oppositeText_Color: cssProperties.colors.black, @@ -220,7 +219,6 @@ function styleGuide () { sixthButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. - SUCCESS .................. */ successButton_TextColor: cssProperties.colors.white, diff --git a/remix-lib/src/ui/style-guide_metropolis.js b/remix-lib/src/ui/style-guide_metropolis.js index 47ac5d083b..0521fcc3a5 100644 --- a/remix-lib/src/ui/style-guide_metropolis.js +++ b/remix-lib/src/ui/style-guide_metropolis.js @@ -3,8 +3,6 @@ module.exports = styleGuide function styleGuide () { - - /* -------------------------------------------------------------------------- CSS PROPERTIES @@ -36,7 +34,7 @@ function styleGuide () { blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)', blueMonday: 'hsla(213, 100%, 16%, 1)', - + // GREY grey: 'hsla(0, 0%, 40%, 1)', lightGrey: 'hsla(0, 0%, 40%, .5)', @@ -91,7 +89,7 @@ function styleGuide () { var appProperties = { /* ------------------------------------------------------ ACE THEME - ------------------------------------------------------ */ + ------------------------------------------------------ */ aceTheme: 'tomorrow_night_blue', @@ -234,7 +232,6 @@ function styleGuide () { sixthButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. - SUCCESS .................. */ successButton_TextColor: cssProperties.colors.white, From 7e46022b41e050b2debfb89a27f0217ba378d0d8 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 Dec 2017 16:21:47 +0100 Subject: [PATCH 14/16] use lighter color for current AST node highlighting --- remix-lib/src/ui/style-guide.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index b6e022f170..ed4a5c8bf7 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -419,7 +419,7 @@ function styleGuide () { 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_Highlights: appProperties.secondary_BackgroundColor, backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor, backgroundColor_DebuggerMode: appProperties.debuggingMode_BackgroundColor, From b2d9ae0a2345e702554f4667309e4c498277563d Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 Dec 2017 16:46:14 +0100 Subject: [PATCH 15/16] fix compiler input --- remix-lib/src/helpers/compilerHelper.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/remix-lib/src/helpers/compilerHelper.js b/remix-lib/src/helpers/compilerHelper.js index 2e99e9afc1..154ba342c4 100644 --- a/remix-lib/src/helpers/compilerHelper.js +++ b/remix-lib/src/helpers/compilerHelper.js @@ -14,12 +14,12 @@ function compilerInput (contracts) { optimizer: { enabled: false, runs: 500 - } - }, - outputSelection: { - '*': { - '': [ 'legacyAST' ], - '*': [ 'abi', 'metadata', 'evm.legacyAssembly', 'evm.bytecode', 'evm.deployedBytecode', 'evm.methodIdentifiers', 'evm.gasEstimates' ] + }, + outputSelection: { + '*': { + '': [ 'legacyAST' ], + '*': [ 'abi', 'metadata', 'evm.legacyAssembly', 'evm.bytecode', 'evm.deployedBytecode', 'evm.methodIdentifiers', 'evm.gasEstimates' ] + } } } }) From 80e0f20c78a760c47e994accb149d3ceee603478 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 11 Dec 2017 17:06:37 +0100 Subject: [PATCH 16/16] fix compiler input ref --- remix-solidity/test/decoder/storageDecoder.js | 24 ++----------------- .../test/decoder/storageLocation.js | 24 ++----------------- 2 files changed, 4 insertions(+), 44 deletions(-) diff --git a/remix-solidity/test/decoder/storageDecoder.js b/remix-solidity/test/decoder/storageDecoder.js index 1c4d35a68b..a6df60911e 100644 --- a/remix-solidity/test/decoder/storageDecoder.js +++ b/remix-solidity/test/decoder/storageDecoder.js @@ -3,6 +3,8 @@ var tape = require('tape') var compiler = require('solc') var stateDecoder = require('../../src/decoder/stateDecoder') var MockStorageResolver = require('./mockStorageResolver') +var remixLib = require('remix-lib') +var compilerInput = remixLib.helpers.compiler.compilerInput tape('solidity', function (t) { t.test('storage decoder', function (st) { @@ -269,25 +271,3 @@ function testStructArrayStorage (st, cb) { cb() }) } - -function compilerInput (contracts) { - return JSON.stringify({ - language: 'Solidity', - sources: { - 'test.sol': { - content: contracts - } - }, - settings: { - optimizer: { - enabled: false, - runs: 500 - } - }, - outputSelection: { - '*': { - '*': [ 'metadata', 'evm.bytecode', 'abi', 'legacyAST', 'metadata', 'evm.assembly', 'evm.methodIdentifiers', 'evm.gasEstimates' ] - } - } - }) -} diff --git a/remix-solidity/test/decoder/storageLocation.js b/remix-solidity/test/decoder/storageLocation.js index cbae90f7de..fe4dc601d3 100644 --- a/remix-solidity/test/decoder/storageLocation.js +++ b/remix-solidity/test/decoder/storageLocation.js @@ -3,6 +3,8 @@ var tape = require('tape') var compiler = require('solc') var stateDecoder = require('../../src/decoder/stateDecoder') var contracts = require('./contracts/miscContracts') +var remixLib = require('remix-lib') +var compilerInput = remixLib.helpers.compiler.compilerInput tape('solidity', function (t) { t.test('storage location', function (st) { @@ -55,25 +57,3 @@ function checkLocation (st, location, slot, offset) { st.equal(location.offset, offset) st.equal(location.slot, slot) } - -function compilerInput (contracts) { - return JSON.stringify({ - language: 'Solidity', - sources: { - 'test.sol': { - content: contracts - } - }, - settings: { - optimizer: { - enabled: false, - runs: 500 - } - }, - outputSelection: { - '*': { - '*': [ 'metadata', 'evm.bytecode', 'abi', 'legacyAST', 'metadata', 'evm.assembly', 'evm.methodIdentifiers', 'evm.gasEstimates' ] - } - } - }) -}