update style-guide

remix-lib/src/ui/style-guide_master.js

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

remix-lib/src/ui/style-guide_metropolis.js

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