From c25b0aebb827ab2a44fc07b2d9fd552a0983a4be Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 4 Dec 2017 17:09:11 +0100 Subject: [PATCH] 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,