remix_theme style-guide update

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_TextColor: cssProperties.colors.black,
-    warning_BackgroundColor: cssProperties.colors.blue,
+    warning_BackgroundColor: cssProperties.colors.orange,
-    warning_BorderColor: 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_TextColor: cssProperties.colors.white,
-    solidBorderBox_BackgroundColor: cssProperties.colors.blueGreyEve,
+    solidBorderBox_BackgroundColor: cssProperties.colors.black,
-    solidBorderBox_BorderColor: cssProperties.colors.backgroundBlue,
+    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,
+        BackgroundColor: appProperties.quaternaryButton_BackgroundColor,
-        BorderColor: appProperties.secondaryButton_BorderColor,
+        BorderColor: appProperties.quaternaryButton_BorderColor,
-        Color: appProperties.secondaryButton_TextColor
+        Color: appProperties.quaternaryButton_TextColor
       })
 
     },
@@ -442,9 +471,9 @@ function styleGuide () {
                               RIGHT PANEL
     /* ------------------------------------------------------ */
     rightPanel: {
-      backgroundColor_Panel: appProperties.primary_BackgroundColor,
+      backgroundColor_Panel: appProperties.seventh_BackgroundColor,
-      backgroundColor_Tab: appProperties.quinary_BackgroundColor,
+      backgroundColor_Tab: appProperties.seventh_BackgroundColor,
-      BackgroundColor_Pre: appProperties.light_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,
+          BackgroundColor: appProperties.solidBox_BackgroundColor,
-          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBox_TextColor
-          Color: appProperties.solidBorderBox_TextColor
         }),
 
         dropdown_RunTab: appProperties.uiElements.dropdown({
@@ -532,10 +560,15 @@ function styleGuide () {
           Color: appProperties.input_TextColor
         }),
 
-        box_Instance: appProperties.uiElements.solidBorderBox({
+        box_Instance: appProperties.uiElements.solidBox({
-          BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+          BackgroundColor: appProperties.solidBox_BackgroundColor,
-          BorderColor: appProperties.solidBorderBox_BorderColor,
+          Color: appProperties.solidBox_TextColor
-          Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        borderBox_Instance: appProperties.uiElements.solidBorderBox({
+          BackgroundColor: appProperties.solidBox_BackgroundColor,
+          Color: appProperties.solidBox_TextColor,
+          BorderColor: appProperties.solidBorderBox_BorderColor
         }),
 
         button_atAddress: appProperties.uiElements.button({