mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

update style-guide

Browse Source
pull/7/head
Rob Stupay 7 years ago committed by yann300
parent 4ee3b2a9bb
commit fefff68e01
3 changed files with 90 additions and 51 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 99
      remix-lib/src/ui/style-guide.js
  2. 26
      remix-lib/src/ui/style-guide_master.js
  3. 16
      remix-lib/src/ui/style-guide_metropolis.js

99
remix-lib/src/ui/style-guide.js
Unescape View File

@ -17,16 +17,18 @@ function styleGuide () {
colors: { colors: {
// BASIC COLORS (B&W and transparent) // BASIC COLORS (B&W and transparent)
transparent: 'transparent', transparent: 'transparent',
white: 'hsla(198, 100%, 97%, 1)', white: 'hsl(0, 0%, 100%)',
black: 'hsla(240, 100%, 6%, 1)', black: 'hsl(0, 0%, 0%)',
opacityBlack: 'hsla(240, 100%, 6%, .7)', opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE // BLUE
blue: 'hsla(233, 91%, 36%, 1)', blue: 'hsla(229, 75%, 87%, 1)',
lightBlue: 'hsla(202, 91%, 75%, 1)', lightBlue: 'hsla(229, 75%, 87%, .5)',
backgroundBlue: 'hsla(229, 100%, 97%, 1)',
blueLightTrans: 'hsla(202, 91%, 75%, .4)', blueLightTrans: 'hsla(202, 91%, 75%, .4)',
backgroundBlue: 'hsla(240, 100%, 21%, 1)',
brightBlue: 'hsla(233, 91%, 58%, 1)', brightBlue: 'hsla(233, 91%, 58%, 1)',
blueGreyEve: 'hsla(213, 64%, 65%, 1)', blueGreyEve: 'hsla(213, 64%, 65%, 1)',
bluePruneEve: 'hsla(232, 30%, 20%, 1)', bluePruneEve: 'hsla(232, 30%, 20%, 1)',
blueBerrySmog: 'hsla(286, 15%, 22%, 1)', blueBerrySmog: 'hsla(286, 15%, 22%, 1)',
@ -35,31 +37,31 @@ function styleGuide () {
blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueMorningGlory: 'hsla(213, 74%, 80%, 1)',
blueFairyDust: 'hsla(181, 83%, 86%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)',
blueMonday: 'hsla(213, 100%, 16%, 1)', blueMonday: 'hsla(213, 100%, 16%, 1)',
greenZing: 'hsla(148, 79%, 47%, 1)',
// GREY // GREY
grey: 'hsla(0, 0%, 40%, 1)', grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
blueGrey: 'hsla(206, 24%, 58%, .8)', blueGrey: 'hsla(206, 24%, 58%, .8)',
greyBlueNight: 'hsla(215, 55%, 18%, 1)', greyBlueNight: 'hsla(215, 55%, 18%, 1)',
greyBlueLight: 'hsla(213, 15%, 58%, 1)', greyBlueLight: 'hsla(213, 15%, 58%, 1)',
greyBlueMed: 'hsla(215, 55%, 28%, 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)', desatGrey: 'hsla(173, 17%, 79%, 1)',
// RED // RED
strongRed: 'hsla(0, 100%, 71%, 1)', strongRed: 'hsla(0, 100%, 71%, 1)',
red: 'hsla(0, 82%, 82%, 1)', red: 'hsla(0, 82%, 82%, 1)',
lightRed: 'hsla(0, 82%, 82%, .8)', lightRed: 'hsla(0, 82%, 82%, .5)',
// GREEN // GREEN
green: 'hsla(141, 75%, 84%, 1)', green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)', lightGreen: 'hsla(141, 75%, 84%, .5)',
greenZing: 'hsla(148, 79%, 47%, 1)',
// PINK // PINK
pink: 'hsla(300, 69%, 76%, 1)', pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(286, 71%, 88%, 1)', lightPink: 'hsla(286, 71%, 88%, 1)',
// YELLOW // ORANGE
orange: 'hsla(39, 87%, 50%, 1)', orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(39, 87%, 50%, .5)', lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET // VIOLET
violet: 'hsla(240, 64%, 68%, 1)', violet: 'hsla(240, 64%, 68%, 1)',
lightViolet: 'hsla(240, 64%, 68%, .5)' lightViolet: 'hsla(240, 64%, 68%, .5)'
@ -89,17 +91,23 @@ function styleGuide () {
var appProperties = { var appProperties = {
aceTheme: 'tomorrow_night_blue', /* ------------------------------------------------------
ACE THEME
------------------------------------------------------ */
aceTheme: '',
/* ------------------------------------------------------ /* ------------------------------------------------------
BACKGROUND COLORS BACKGROUND COLORS
------------------------------------------------------ */ ------------------------------------------------------ */
primary_BackgroundColor: cssProperties.colors.black, primary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.backgroundBlue, secondary_BackgroundColor: cssProperties.colors.backgroundBlue,
tertiary_BackgroundColor: cssProperties.colors.greyBlueNight,
quaternary_BackgroundColor: cssProperties.colors.blueGreyEve, tertiary_BackgroundColor: cssProperties.colors.backgroundBlue,
fifth_BackgroundColor: cssProperties.colors.bluePruneEve, quaternary_BackgroundColor: cssProperties.colors.backgroundBlue,
seventh_BackgroundColor: cssProperties.colors.blueMonday, fifth_BackgroundColor: cssProperties.colors.backgroundBlue,
seventh_BackgroundColor: cssProperties.colors.veryLightGrey,
dark_BackgroundColor: cssProperties.colors.black, dark_BackgroundColor: cssProperties.colors.black,
light_BackgroundColor: cssProperties.colors.white, light_BackgroundColor: cssProperties.colors.white,
debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet,
@ -112,21 +120,24 @@ function styleGuide () {
/* ------------------------------------------------------ /* ------------------------------------------------------
TEXT COLORS TEXT COLORS
******************************************************** */ ******************************************************** */
mainText_Color: cssProperties.colors.white, mainText_Color: cssProperties.colors.black,
supportText_Color: cssProperties.colors.lightBlue, supportText_Color: cssProperties.colors.grey,
sub_supportText_Color: cssProperties.colors.greyBlueLight,
sub_supportText_Color: cssProperties.colors.black,
specialText_Color: cssProperties.colors.greenZing, specialText_Color: cssProperties.colors.greenZing,
brightText_Color: cssProperties.colors.blueMascara, brightText_Color: cssProperties.colors.brightBlue,
oppositeText_Color: cssProperties.colors.black, oppositeText_Color: cssProperties.colors.black,
additionalText_Color: cssProperties.colors.desatGrey, additionalText_Color: cssProperties.colors.desatGrey,
errorText_Color: cssProperties.colors.strongRed, errorText_Color: cssProperties.colors.strongRed,
warningText_Color: cssProperties.colors.orange, warningText_Color: cssProperties.colors.orange,
infoText_Color: cssProperties.colors.violet, infoText_Color: cssProperties.colors.violet,
/* ------------------------------------------------------ /* ------------------------------------------------------
ICONS ICONS
******************************************************** */ ******************************************************** */
icon_Color: cssProperties.colors.white, icon_Color: cssProperties.colors.black,
icon_AltColor: cssProperties.colors.black, icon_AltColor: cssProperties.colors.white,
icon_HoverColor: cssProperties.colors.orange, icon_HoverColor: cssProperties.colors.orange,
/* ------------------------------------------------------ /* ------------------------------------------------------
@ -144,8 +155,8 @@ function styleGuide () {
// Warning // Warning
warning_TextColor: cssProperties.colors.black, warning_TextColor: cssProperties.colors.black,
warning_BackgroundColor: cssProperties.colors.orange, warning_BackgroundColor: cssProperties.colors.lightOrange,
// warning_BorderColor: cssProperties.colors.orange, warning_BorderColor: cssProperties.colors.orange,
// Tooltip // Tooltip
tooltip_Color: cssProperties.colors.white, tooltip_Color: cssProperties.colors.white,
@ -157,7 +168,7 @@ function styleGuide () {
******************************************************** */ ******************************************************** */
dropdown_TextColor: cssProperties.colors.black, dropdown_TextColor: cssProperties.colors.black,
dropdown_BackgroundColor: cssProperties.colors.white, dropdown_BackgroundColor: cssProperties.colors.white,
dropdown_SecondaryBackgroundColor: cssProperties.colors.blueMorningGlory, dropdown_SecondaryBackgroundColor: cssProperties.colors.white,
dropdown_BorderColor: cssProperties.colors.veryLightGrey, dropdown_BorderColor: cssProperties.colors.veryLightGrey,
/* ------------------------------------------------------ /* ------------------------------------------------------
@ -170,15 +181,15 @@ function styleGuide () {
/* ------------------------------------------------------ /* ------------------------------------------------------
SOLID BORDER BOX SOLID BORDER BOX
******************************************************** */ ******************************************************** */
solidBorderBox_TextColor: cssProperties.colors.white, solidBorderBox_TextColor: cssProperties.colors.black,
solidBorderBox_BackgroundColor: cssProperties.colors.black, solidBorderBox_BackgroundColor: cssProperties.colors.white,
solidBorderBox_BorderColor: cssProperties.colors.lightBlue, solidBorderBox_BorderColor: cssProperties.colors.lightBlue,
/* ------------------------------------------------------ /* ------------------------------------------------------
SOLID BOX SOLID BOX
******************************************************** */ ******************************************************** */
solidBox_TextColor: cssProperties.colors.white, solidBox_TextColor: cssProperties.colors.black,
solidBox_BackgroundColor: cssProperties.colors.black, solidBox_BackgroundColor: cssProperties.colors.white,
/* ------------------------------------------------------ /* ------------------------------------------------------
BUTTONS BUTTONS
@ -195,7 +206,7 @@ function styleGuide () {
SECONDARY SECONDARY
.................. */ .................. */
secondaryButton_TextColor: cssProperties.colors.black, secondaryButton_TextColor: cssProperties.colors.black,
secondaryButton_BackgroundColor: cssProperties.colors.lightBlue, secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey,
secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, secondaryButton_BorderColor: cssProperties.colors.veryLightGrey,
/* ................. /* .................
@ -210,7 +221,7 @@ function styleGuide () {
Quaternary Quaternary
.................. */ .................. */
quaternaryButton_TextColor: cssProperties.colors.black, quaternaryButton_TextColor: cssProperties.colors.black,
quaternaryButton_BackgroundColor: cssProperties.colors.blueMascara, quaternaryButton_BackgroundColor: cssProperties.colors.white,
quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey, quaternaryButton_BorderColor: cssProperties.colors.veryLightGrey,
/* ................. /* .................
@ -269,13 +280,13 @@ function styleGuide () {
// TRANSACTION // TRANSACTION
transactButton_TextColor: cssProperties.colors.black, transactButton_TextColor: cssProperties.colors.black,
transactButton_BackgroundColor: cssProperties.colors.blueFairyDust, transactButton_BackgroundColor: cssProperties.colors.lightRed,
transactButton_BorderColor: cssProperties.colors.lightRed, transactButton_BorderColor: cssProperties.colors.lightRed,
// CONSTANT // CONSTANT
constantButton_TextColor: cssProperties.colors.black, constantButton_TextColor: cssProperties.colors.black,
constantButton_BackgroundColor: cssProperties.colors.greenZing, constantButton_BackgroundColor: cssProperties.colors.lightBlue,
constantButton_BorderColor: cssProperties.colors.greenZing, constantButton_BorderColor: cssProperties.colors.lightBlue,
// PAYABLE TRANSACTION // PAYABLE TRANSACTION
transactPayableButton_TextColor: cssProperties.colors.black, transactPayableButton_TextColor: cssProperties.colors.black,
@ -384,8 +395,8 @@ function styleGuide () {
REMIX GENERAL REMIX GENERAL
/* ------------------------------------------------------ */ /* ------------------------------------------------------ */
remix: { remix: {
modalDialog_BackgroundColor_Primary: appProperties.fifth_BackgroundColor, modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor,
modalDialog_text_Primary: appProperties.additionalText_Color, modalDialog_text_Primary: appProperties.mainText_Color,
modalDialog_text_Secondary: appProperties.supportText_Color, modalDialog_text_Secondary: appProperties.supportText_Color,
modalDialog_text_Link: appProperties.brightText_Color, modalDialog_text_Link: appProperties.brightText_Color,
modalDialog_text_Em: appProperties.specialText_Color, modalDialog_text_Em: appProperties.specialText_Color,
@ -500,9 +511,9 @@ function styleGuide () {
RIGHT PANEL RIGHT PANEL
/* ------------------------------------------------------ */ /* ------------------------------------------------------ */
rightPanel: { rightPanel: {
backgroundColor_Panel: appProperties.seventh_BackgroundColor, backgroundColor_Panel: appProperties.fifth_BackgroundColor,
backgroundColor_Tab: appProperties.seventh_BackgroundColor, backgroundColor_Tab: appProperties.fifth_BackgroundColor,
BackgroundColor_Pre: appProperties.dark_BackgroundColor, BackgroundColor_Pre: appProperties.primary_BackgroundColor,
text_Primary: appProperties.mainText_Color, text_Primary: appProperties.mainText_Color,
text_Secondary: appProperties.supportText_Color, text_Secondary: appProperties.supportText_Color,
@ -672,7 +683,7 @@ function styleGuide () {
}), }),
button_Debugger: appProperties.uiElements.button({ button_Debugger: appProperties.uiElements.button({
BackgroundColor: appProperties.teriaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor
}), }),

26
remix-lib/src/ui/style-guide_master.js
Unescape View File

@ -36,7 +36,7 @@ function styleGuide () {
// PINK // PINK
pink: 'hsla(300, 69%, 76%, 1)', pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)', lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW // ORANGE
orange: 'hsla(44, 100%, 50%, 1)', orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)', lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET // VIOLET
@ -67,11 +67,25 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var appProperties = { var appProperties = {
/* ------------------------------------------------------
ACE THEME
------------------------------------------------------ */
aceTheme: '',
/* ------------------------------------------------------ /* ------------------------------------------------------
BACKGROUND COLORS BACKGROUND COLORS
------------------------------------------------------ */ ------------------------------------------------------ */
primary_BackgroundColor: cssProperties.colors.white, primary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.backgroundBlue, 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, dark_BackgroundColor: cssProperties.colors.veryLightGrey,
light_BackgroundColor: cssProperties.colors.white, light_BackgroundColor: cssProperties.colors.white,
debuggingMode_BackgroundColor: cssProperties.colors.lightViolet, debuggingMode_BackgroundColor: cssProperties.colors.lightViolet,
@ -86,6 +100,13 @@ function styleGuide () {
******************************************************** */ ******************************************************** */
mainText_Color: cssProperties.colors.black, mainText_Color: cssProperties.colors.black,
supportText_Color: cssProperties.colors.grey, 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, errorText_Color: cssProperties.colors.strongRed,
warningText_Color: cssProperties.colors.orange, warningText_Color: cssProperties.colors.orange,
infoText_Color: cssProperties.colors.violet, infoText_Color: cssProperties.colors.violet,
@ -93,6 +114,9 @@ function styleGuide () {
ICONS ICONS
******************************************************** */ ******************************************************** */
icon_Color: cssProperties.colors.black, icon_Color: cssProperties.colors.black,
icon_AltColor: cssProperties.colors.white,
icon_HoverColor: cssProperties.colors.orange, icon_HoverColor: cssProperties.colors.orange,
/* ------------------------------------------------------ /* ------------------------------------------------------

16
remix-lib/src/ui/style-guide_metropolis.js
Unescape View File

@ -24,8 +24,9 @@ function styleGuide () {
// BLUE // BLUE
blue: 'hsla(233, 91%, 36%, 1)', blue: 'hsla(233, 91%, 36%, 1)',
lightBlue: 'hsla(202, 91%, 75%, 1)', lightBlue: 'hsla(202, 91%, 75%, 1)',
blueLightTrans: 'hsla(202, 91%, 75%, .4)',
backgroundBlue: 'hsla(240, 100%, 21%, 1)', backgroundBlue: 'hsla(240, 100%, 21%, 1)',
blueLightTrans: 'hsla(202, 91%, 75%, .4)',
brightBlue: 'hsla(233, 91%, 58%, 1)', brightBlue: 'hsla(233, 91%, 58%, 1)',
blueGreyEve: 'hsla(213, 64%, 65%, 1)', blueGreyEve: 'hsla(213, 64%, 65%, 1)',
bluePruneEve: 'hsla(232, 30%, 20%, 1)', bluePruneEve: 'hsla(232, 30%, 20%, 1)',
@ -35,17 +36,16 @@ function styleGuide () {
blueMorningGlory: 'hsla(213, 74%, 80%, 1)', blueMorningGlory: 'hsla(213, 74%, 80%, 1)',
blueFairyDust: 'hsla(181, 83%, 86%, 1)', blueFairyDust: 'hsla(181, 83%, 86%, 1)',
blueMonday: 'hsla(213, 100%, 16%, 1)', blueMonday: 'hsla(213, 100%, 16%, 1)',
greenZing: 'hsla(148, 79%, 47%, 1)',
// GREY // GREY
grey: 'hsla(0, 0%, 40%, 1)', grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
blueGrey: 'hsla(206, 24%, 58%, .8)', blueGrey: 'hsla(206, 24%, 58%, .8)',
greyBlueNight: 'hsla(215, 55%, 18%, 1)', greyBlueNight: 'hsla(215, 55%, 18%, 1)',
greyBlueLight: 'hsla(213, 15%, 58%, 1)', greyBlueLight: 'hsla(213, 15%, 58%, 1)',
greyBlueMed: 'hsla(215, 55%, 28%, 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)', desatGrey: 'hsla(173, 17%, 79%, 1)',
// RED // RED
strongRed: 'hsla(0, 100%, 71%, 1)', strongRed: 'hsla(0, 100%, 71%, 1)',
@ -54,6 +54,7 @@ function styleGuide () {
// GREEN // GREEN
green: 'hsla(141, 75%, 84%, 1)', green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)', lightGreen: 'hsla(141, 75%, 84%, .5)',
greenZing: 'hsla(148, 79%, 47%, 1)',
// PINK // PINK
pink: 'hsla(300, 69%, 76%, 1)', pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(286, 71%, 88%, 1)', lightPink: 'hsla(286, 71%, 88%, 1)',
@ -88,6 +89,9 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var appProperties = { var appProperties = {
/* ------------------------------------------------------
ACE THEME
------------------------------------------------------ */
aceTheme: 'tomorrow_night_blue', aceTheme: 'tomorrow_night_blue',
@ -145,7 +149,7 @@ function styleGuide () {
// Warning // Warning
warning_TextColor: cssProperties.colors.black, warning_TextColor: cssProperties.colors.black,
warning_BackgroundColor: cssProperties.colors.orange, warning_BackgroundColor: cssProperties.colors.orange,
// warning_BorderColor: cssProperties.colors.orange, warning_BorderColor: cssProperties.colors.orange,
// Tooltip // Tooltip
tooltip_Color: cssProperties.colors.white, tooltip_Color: cssProperties.colors.white,

Write Preview
Loading…
Cancel
Save