fix(ui): Apply local CSS variables to existing themes

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

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

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

@@ -411,6 +411,7 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -460,6 +461,8 @@ function styleGuide () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_Log_Succeed: appProperties.success_BorderColor,
       icon_Color_Log_Failed: appProperties.errorText_Color,
       icon_BackgroundColor_Log_Call: appProperties.infoText_Color,
@@ -514,6 +517,8 @@ function styleGuide () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

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

@@ -418,6 +418,7 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid hsla(215, 81%, 79%, .3)',
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -467,6 +468,8 @@ function styleGuideDark () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '0.07ch solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,
       icon_Color_Menu: appProperties.icon_Color,
@@ -516,6 +519,8 @@ function styleGuideDark () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '0.5rem',
+      dragbarBackgroundColor: '',
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

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

@@ -398,8 +398,6 @@ 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,
 
@@ -409,6 +407,7 @@ function styleGuideDavid () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarBorderRight: '2px solid ' + cssProperties.colors.veryLightGrey,
 
       icon_Color_Menu: appProperties.icon_Color,
       icon_HoverColor_Menu: appProperties.icon_HoverColor,
@@ -443,8 +442,6 @@ 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,
@@ -460,6 +457,8 @@ function styleGuideDavid () {
       text_Regular_TransactionLog: appProperties.supportText_Color,
       text_Button: appProperties.oppositeText_Color,
 
+      blockBorderTop: '2px solid ' + cssProperties.colors.veryLightGrey,
+
       icon_Color_Log_Succeed: appProperties.success_BorderColor,
       icon_Color_Log_Failed: appProperties.errorText_Color,
       icon_BackgroundColor_Log_Call: appProperties.infoText_Color,
@@ -503,10 +502,6 @@ 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,
@@ -518,6 +513,8 @@ function styleGuideDavid () {
 
       bar_Ghost: appProperties.ghostBar,
       bar_Dragging: appProperties.draggingBar,
+      dragbarWidth: '2px',
+      dragbarBackgroundColor: cssProperties.colors.veryLightGrey,
 
       icon_Color_TogglePanel: appProperties.icon_Color,
       icon_HoverColor_TogglePanel: appProperties.icon_HoverColor,

src/lib/panels-resize.js

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