fix(ui): Conditionally apply custom styles

Two existing themes retain their styling, though the cssjs now
checks whether a few properties are set to custom: true on the
current style, if so passes the value, otherwise returns the
existing default

Ref: #1198

src/app/panels/left-icon-panel.js

@@ -151,11 +151,19 @@ const css = csjs`
   }
   .dragbar             {
     position           : absolute;
-    width              : 2px;
+    width              : ${
+      styles.rightPanel.customDragbarWidth
+      ? styles.rightPanel.dragbarWidth
+      : '0.5rem'
+    };
     top                : 3em;
     bottom             : 0;
     cursor             : col-resize;
-    background-color   : hsla(0, 0%, 40%, .2);
+    background-color   : ${
+      styles.rightPanel.customDragbarBackgroundColor
+      ? styles.rightPanel.dragbarBackgroundColor
+      : ''
+    };
     z-index            : 999;
     border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
   }

src/app/panels/styles/terminal-styles.js

@@ -78,7 +78,10 @@ var css = csjs`
     line-height       : 2ch;
     padding           : 1ch;
     margin-top        : 2ch;
-    border-top        : 2px solid ${styles.colors.veryLightGrey};
+    border-top        : ${styles.terminal.customBlockBorderTop
+      ? styles.terminal.blockBorderTop 
+      : '0.07ch solid ' + styles.colors.veryLightGrey
+    };
     color             : ${styles.appProperties.mainText_Color};
   }
   .cli                {

src/app/ui/styles-guide/styleGuideDavid.js

@@ -94,7 +94,7 @@ function styleGuideDavid () {
                               RESIZING
     ******************************************************** */
     ghostBar: cssProperties.colors.veryLightGrey,
-    draggingBar: cssProperties.colors.blueGreyEve,
+    draggingBar: cssProperties.colors.veryLightGrey,
 
     /* ------------------------------------------------------
                             TEXT COLORS
@@ -398,6 +398,8 @@ function styleGuideDavid () {
                     LEFT PANEL (FILE PANEL)
     /* ------------------------------------------------------ */
     leftPanel: {
+      customDragbarBorderRight: true,
+      dragbarBorderRight: '2px solid ' + cssProperties.colors.veryLightGrey,
       backgroundColor_Panel: appProperties.primary_BackgroundColor,
       backgroundColor_FileExplorer: appProperties.tertiary_BackgroundColor,
 
@@ -441,6 +443,8 @@ function styleGuideDavid () {
                           TERMINAL
     /* ------------------------------------------------------ */
     terminal: {
+      customBlockBorderTop: true,
+      blockBorderTop: '2px solid ' + cssProperties.colors.veryLightGrey,
       backgroundColor_Menu: appProperties.secondary_BackgroundColor,
       backgroundColor_Terminal: appProperties.seventh_BackgroundColor,
       backgroundColor_TerminalCLI: appProperties.seventh_BackgroundColor,
@@ -499,6 +503,10 @@ function styleGuideDavid () {
                               RIGHT PANEL
     /* ------------------------------------------------------ */
     rightPanel: {
+      customDragbarWidth: true,
+      customDragbarBackgroundColor: true,
+      dragbarWidth: '2px',
+      dragbarBackgroundColor: cssProperties.colors.veryLightGrey,
       backgroundColor_Panel: appProperties.fifth_BackgroundColor,
       backgroundColor_Tab: appProperties.fifth_BackgroundColor,
       BackgroundColor_Pre: appProperties.primary_BackgroundColor,

src/lib/panels-resize.js

@@ -12,7 +12,11 @@ const css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : 2px solid hsla(215, 81%, 79%, .3);
+    border-right      : ${
+      styles.leftPanel.customDragbarBorderRight
+      ? styles.leftPanel.dragbarBorderRight
+      : '2px solid hsla(215, 81%, 79%, .3)'
+    }
   }
   .ghostbar           {
     width             : 3px;