Skip to content

B
baas-ide
Commit 37cf211f authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

Update style guide

parent 9bf7390e
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 61 deletions
src/ui/styles/style-guide.js
View file @ 37cf211f
...@@ -3,84 +3,446 @@ ...@@ -3,84 +3,446 @@
module.exports = styleGuide module.exports = styleGuide
function 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 // BACKGROUND COLORS
general_BackgroundColor: 'hsl(0, 0%, 100%)', // white general_BackgroundColor: css_properties.colors.white,
highlight_BackgroundColor: 'hsla(229, 100%, 97%, 1)', // backgroundBlue support_BackgroundColor: css_properties.colors.backgroundBlue,
// TEXT COLORS // TEXT COLORS
mainText_Color: 'hsl(0, 0%, 0%)', // black mainText_Color: css_properties.colors.black,
normalText_Color: 'hsla(0, 0%, 40%, 1)', // grey supportText_Color: css_properties.colors.grey,
// ICONS // ICONS
icon_Color: 'hsl(0, 0%, 0%)', // black icon_Color: css_properties.colors.black,
icon_HoverColor: 'hsla(44, 100%, 50%, 1)', // orange icon_HoverColor: css_properties.colors.orange,
// UI ELEMENTS // UI ELEMENTS
element_TextColor: 'hsl(0, 0%, 0%)', // black , element_TextColor: css_properties.colors.black,
element_BackgroundColor: 'hsl(0, 0%, 100%)', // white element_BackgroundColor: css_properties.colors.white,
element_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey 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 REMIX PROPERTIES
makes up our app and use semantic names defined under (2.)
*/ -------------------------------------------------------------------------- */
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', EDITOR
white: 'hsl(0, 0%, 100%)', ************************** */
black: 'hsl(0, 0%, 0%)', editor: {
opacityBlack: 'hsla(0, 0%, 0%, .4)', 'background-color': '', // general_BackgroundColor
// BLUE 'color': '', // fonts/color
blue: 'hsla(229, 75%, 87%, 1)', gutter: {
lightBlue: 'hsla(229, 75%, 87%, .5)', background: app_properties.support_BackgroundColor,
backgroundBlue: 'hsla(229, 100%, 97%, 1)', highlightedNumber: {
// GREY background: app_properties.support_BackgroundColor // support_BackgroundColor
grey: 'hsla(0, 0%, 40%, 1)', },
lightGrey: 'hsla(0, 0%, 40%, .5)', },
veryLightGrey: 'hsla(0, 0%, 40%, .2)', navTabs: {
// RED background: app_properties.support_BackgroundColor,
red: 'hsla(0, 82%, 82%, 1)', 'color': '' // fonts/color
lightRed: 'hsla(0, 82%, 82%, .5)', },
// GREEN icons: {
green: 'hsla(141, 75%, 84%, 1)', color: app_properties.icon_Color,
lightGreen: 'hsla(141, 75%, 84%, .5)', hover: {
// PINK color: app_properties.icon_Color
pink: 'hsla(300, 69%, 76%, 1)', }
lightPink: 'hsla(300, 69%, 76%, .5)', },
// YELLOW code: {
orange: 'hsla(44, 100%, 50%, 1)', // types, comments, parameters...
lightOrange: 'hsla(44, 100%, 50%, .5)', highlightedLine: {
// VIOLET background: app_properties.support_BackgroundColor //support_BackgroundColor
violet: 'hsla(240, 64%, 68%, 1)' },
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 = { var elementColors = {
/* ----------------------- /* -----------------------
BUTTONS BUTTONS
----------------------- */ ----------------------- */
// DROPDOWN // DROPDOWN
dropdown_TextColor: colors.element_TextColor, dropdown_TextColor: app_properties.element_TextColor,
dropdown_BackgroundColor: colors.element_BackgroundColor, dropdown_BackgroundColor: app_properties.element_BackgroundColor,
dropdown_BorderColor: colors.element_BorderColor, dropdown_BorderColor: app_properties.element_BorderColor,
// BUTTON // BUTTON
button_TextColor: colors.element_TextColor, button_TextColor: app_properties.element_TextColor,
button_BorderColor: colors.element_BorderColor, button_BorderColor: app_properties.element_BorderColor,
rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)',
rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)'
...@@ -97,18 +459,18 @@ var elementColors = { ...@@ -97,18 +459,18 @@ var elementColors = {
font-size : 12px; font-size : 12px;
padding : 10px 15px; padding : 10px 15px;
line-height : 20px; line-height : 20px;
background : ${colors.white}; background : ${css_properties.colors.white};
border-radius : 3px; border-radius : 3px;
border : 1px solid ${colors.veryLightGrey}; border : 1px solid ${css_properties.colors.veryLightGrey};
overflow : hidden; overflow : hidden;
word-break : break-word; word-break : break-word;
width : 100%; width : 100%;
`, `,
'info-text-box': ` 'info-text-box': `
background-color : ${colors.white}; background-color : ${css_properties.colors.white};
line-height : 20px; line-height : 20px;
border : .2em dotted ${colors.lightGrey}; border : .2em dotted ${css_properties.colors.lightGrey};
padding : 8px 15px; padding : 8px 15px;
border-radius : 5px; border-radius : 5px;
margin-bottom : 1em; margin-bottom : 1em;
...@@ -117,7 +479,7 @@ var elementColors = { ...@@ -117,7 +479,7 @@ var elementColors = {
`, `,
'input': ` 'input': `
border : 1px solid ${colors.veryLightGrey}; border : 1px solid ${css_properties.colors.veryLightGrey};
height : 25px; height : 25px;
width : 250px; width : 250px;
border-radius : 3px; border-radius : 3px;
...@@ -173,7 +535,7 @@ var elementColors = { ...@@ -173,7 +535,7 @@ var elementColors = {
} }
return { return {
colors: colors, colors: css_properties.colors,
elementColors: elementColors, elementColors: elementColors,
dropdown: buttons['dropdown'], dropdown: buttons['dropdown'],
button: buttons['button'], button: buttons['button'],
...@@ -182,3 +544,22 @@ var elementColors = { ...@@ -182,3 +544,22 @@ var elementColors = {
displayBox: textBoxes['display-box'] 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.)
*/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment