From 37cf211f7a8b61ade0d9e82578e34ce0328f1631 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Tue, 26 Sep 2017 04:52:01 +0100 Subject: [PATCH] Update style guide --- src/ui/styles/style-guide.js | 503 ++++++++++++++++++++++++++++++----- 1 file changed, 442 insertions(+), 61 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 1e4f271710..b26978f439 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -3,84 +3,446 @@ module.exports = styleGuide function styleGuide () { + /* -------------------------------------------------------------------------- - COLORS + + CSS PROPERTIES + -------------------------------------------------------------------------- */ - var colors = { + var css_properties = { + + /**************************** + 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 + 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)' + }, + + /**************************** + FONT + ************************** */ + fonts: { + }, + + /**************************** + BORDERS + ************************** */ + borders: {} + } + + /* -------------------------------------------------------------------------- + + APP PROPERTIES + + -------------------------------------------------------------------------- */ + + var app_properties = { + // BACKGROUND COLORS - general_BackgroundColor: 'hsl(0, 0%, 100%)', // white - highlight_BackgroundColor: 'hsla(229, 100%, 97%, 1)', // backgroundBlue + general_BackgroundColor: css_properties.colors.white, + support_BackgroundColor: css_properties.colors.backgroundBlue, // TEXT COLORS - mainText_Color: 'hsl(0, 0%, 0%)', // black - normalText_Color: 'hsla(0, 0%, 40%, 1)', // grey + mainText_Color: css_properties.colors.black, + supportText_Color: css_properties.colors.grey, // ICONS - icon_Color: 'hsl(0, 0%, 0%)', // black - icon_HoverColor: 'hsla(44, 100%, 50%, 1)', // orange + icon_Color: css_properties.colors.black, + icon_HoverColor: css_properties.colors.orange, // UI ELEMENTS - element_TextColor: 'hsl(0, 0%, 0%)', // black , - element_BackgroundColor: 'hsl(0, 0%, 100%)', // white - element_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey + element_TextColor: css_properties.colors.black, + element_BackgroundColor: css_properties.colors.white, + element_BorderColor: css_properties.colors.veryLightGrey -/* -1. most css properties can take many or infinite amounf of different values -=> so we define a set of concrete values that we use: -- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) + } -2. we define certain semantic names that make sense in the context of our app -=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. -- highlightColor: color_red -- borderColor: color_white -- ... +/* -------------------------------------------------------------------------- -3. we define a nested object that represents the component hierarchy that -makes up our app and use semantic names defined under (2.) + REMIX PROPERTIES -*/ +-------------------------------------------------------------------------- */ + +var remix_properties = { + + /**************************** + REMIX GENERAL + ************************** */ + remix: { + fonts: { + 'font': '', + 'font-size': '', + mainText: { + 'color': '' + }, + supportText: { + 'color': '' + } + }, + dropdown: { + 'background-color': '', + 'color': '' + }, + textBox: { + 'background-color': '', + 'border': '', + 'color': '' + }, + infoTextBox: { + 'background-color': '', + 'border': '', + 'color': '' + }, + inputField: { + 'background-color': '', + 'color': '' + }, + butons: { + 'background-color': '' + }, + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + + /**************************** + LEFT PANEL (FILE PANEL) + ************************** */ + leftPanel: { + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + treeview: { + color: app_properties.mainText_Color, + highlightedLine: { + background: app_properties.support_BackgroundColor + } + } + }, - // BASIC COLORS (B&W and transparent) - transparent: 'transparent', - white: 'hsl(0, 0%, 100%)', - black: 'hsl(0, 0%, 0%)', - opacityBlack: 'hsla(0, 0%, 0%, .4)', - // BLUE - blue: 'hsla(229, 75%, 87%, 1)', - lightBlue: 'hsla(229, 75%, 87%, .5)', - backgroundBlue: 'hsla(229, 100%, 97%, 1)', - // GREY - grey: 'hsla(0, 0%, 40%, 1)', - lightGrey: 'hsla(0, 0%, 40%, .5)', - veryLightGrey: 'hsla(0, 0%, 40%, .2)', - // RED - red: 'hsla(0, 82%, 82%, 1)', - lightRed: 'hsla(0, 82%, 82%, .5)', - // GREEN - green: 'hsla(141, 75%, 84%, 1)', - lightGreen: 'hsla(141, 75%, 84%, .5)', - // PINK - pink: 'hsla(300, 69%, 76%, 1)', - lightPink: 'hsla(300, 69%, 76%, .5)', - // YELLOW - orange: 'hsla(44, 100%, 50%, 1)', - lightOrange: 'hsla(44, 100%, 50%, .5)', - // VIOLET - violet: 'hsla(240, 64%, 68%, 1)' + /**************************** + EDITOR + ************************** */ + editor: { + 'background-color': '', // general_BackgroundColor + 'color': '', // fonts/color + gutter: { + background: app_properties.support_BackgroundColor, + highlightedNumber: { + background: app_properties.support_BackgroundColor // support_BackgroundColor + }, + }, + navTabs: { + background: app_properties.support_BackgroundColor, + 'color': '' // fonts/color + }, + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + code: { + // types, comments, parameters... + highlightedLine: { + background: app_properties.support_BackgroundColor //support_BackgroundColor + }, + debuggerMode: { + highlightedArea: { + background: app_properties.support_BackgroundColor // same as Debug button in Terminal window + } + } + } + }, + + /**************************** + TERMINAL + ************************** */ + terminal: { + menu: { + background: app_properties.support_BackgroundColor, + 'color': '', // fonts/color + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + dropdown: { // dropdown + 'background-color': '', + 'color': '' + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + }, + terminalWindow: { + 'background-color': '', + 'color': '', + logo: { + 'url': '', + }, + infoLog: { + 'color': '' // fonts/color + }, + errorLog: { + 'color': '' // same as border in errorMessage in rightPanel/compileTab @TODO + }, + transactionLog: { + title: { + 'color': '' + }, + text: { + 'color': '' + }, + detailsButton: { + 'background-color': '', + 'color': '' + }, + debugButton: { + background: app_properties.support_BackgroundColor, + 'color': '' + } + } + } + }, + + /**************************** + RIGHT PANEL + ************************** */ + rightPanel: { + 'background-color': '', // already defined in Remix general + 'color': '', // already defined in Remix general + textBox: { // already defined in Remix general + 'background-color': '', + 'border': '', + 'color': '' + }, + infoTextBox: { // already defined in Remix general + 'background-color': '', + 'border': '', + 'color': '' + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + logo: { + 'url': '' + }, + warningMessage: { + 'border': '', + 'background-color': '', + 'color': '' + }, + errorMessage: { + 'border': '', // same as font color in terminal error @TODO + 'background-color': '', + 'color': '' + }, + successMessage: { + 'border': '', + 'background-color': '', + 'color': '' + }, + dropdown: { + 'background-color': '', // dropdown + 'color': '' + }, + inputField: { // inputField + 'background-color': '', + 'color': '' + }, + + compileTab: { + compileButton: { + 'background-color': '', // or import a special image 'url': '' + 'color': '' + }, + buttons: { + 'background-color': '', // general buttons background color + 'color': '' + }, + details: { + 'background-color': '', // already defined in Remix general + header: { + background: app_properties.support_BackgroundColor, + 'color': '' + }, + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '', + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + title: { + 'color': '' + } + } + } + }, + + runTab: { + compileButton: { + 'background-color': '', // or import new 'url': '' + 'color': '' + }, + atAddressButton: { + 'background-color': '', + 'color': '' + }, + createButton: { + 'background-color': '', + 'color': '' + }, + instance_callButton: { + 'background-color': '', + 'color': '' + }, + instance_transactButton: { + 'background-color': '', + 'color': '' + }, + instance_transactPayableButton: { + 'background-color': '', + 'color': '' + }, + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + + settingsTab: { + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '' + } + }, + + debuggerTab: { + buttons: { + 'background-color': '', // including eye button (needs to get ${styles.button} applied) + 'color': '', + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + dropdowns: { // dropdown + 'background-color': '', // see if ${styles.dropdown} is applied + 'color': '', + instructions: { + highlightedKey: { + background: app_properties.support_BackgroundColor + } + }, + solidityState: { + label: { + 'color': '' // supportText + } + } + } + }, + + analysisTab: { + textBox: { // already in rightPanel general theme + 'background-color': '', + 'color': '' + }, + warningMessage: { // already in rightPanel general theme + 'border': '', + 'background-color': '', + 'color': '' + } + }, + + supportTab: { + textBox: { // already in rightPanel general theme + 'background-color': '', + 'color': '' + }, + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '' + } + } } +} + + var elementColors = { /* ----------------------- BUTTONS ----------------------- */ // DROPDOWN - dropdown_TextColor: colors.element_TextColor, - dropdown_BackgroundColor: colors.element_BackgroundColor, - dropdown_BorderColor: colors.element_BorderColor, + dropdown_TextColor: app_properties.element_TextColor, + dropdown_BackgroundColor: app_properties.element_BackgroundColor, + dropdown_BorderColor: app_properties.element_BorderColor, // BUTTON - button_TextColor: colors.element_TextColor, - button_BorderColor: colors.element_BorderColor, + button_TextColor: app_properties.element_TextColor, + button_BorderColor: app_properties.element_BorderColor, rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' @@ -97,18 +459,18 @@ var elementColors = { font-size : 12px; padding : 10px 15px; line-height : 20px; - background : ${colors.white}; + background : ${css_properties.colors.white}; border-radius : 3px; - border : 1px solid ${colors.veryLightGrey}; + border : 1px solid ${css_properties.colors.veryLightGrey}; overflow : hidden; word-break : break-word; width : 100%; `, 'info-text-box': ` - background-color : ${colors.white}; + background-color : ${css_properties.colors.white}; line-height : 20px; - border : .2em dotted ${colors.lightGrey}; + border : .2em dotted ${css_properties.colors.lightGrey}; padding : 8px 15px; border-radius : 5px; margin-bottom : 1em; @@ -117,7 +479,7 @@ var elementColors = { `, 'input': ` - border : 1px solid ${colors.veryLightGrey}; + border : 1px solid ${css_properties.colors.veryLightGrey}; height : 25px; width : 250px; border-radius : 3px; @@ -173,7 +535,7 @@ var elementColors = { } return { - colors: colors, + colors: css_properties.colors, elementColors: elementColors, dropdown: buttons['dropdown'], button: buttons['button'], @@ -182,3 +544,22 @@ var elementColors = { displayBox: textBoxes['display-box'] } } + +/* + +COMMENTS + +1. most css properties can take many or infinite amounf of different values +=> so we define a set of concrete values that we use: +- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) + +2. we define certain semantic names that make sense in the context of our app +=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. +- highlightColor: color_red +- borderColor: color_white +- ... + +3. we define a nested object that represents the component hierarchy that +makes up our app and use semantic names defined under (2.) + +*/